博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3的边框(一)
阅读量:6498 次
发布时间:2019-06-24

本文共 550 字,大约阅读时间需要 1 分钟。

hot3.png

的边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。主要包括边框圆角,边框图片,边框阴影。

一、

圆角处理时,脑中要形成圆、圆心、长半径、短半径的概念,正圆是椭圆的一种特殊情况。

006zipb5zy79ISm9DPle3&690006zipb5zy79ISmAHK3d3&690 

可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,参考手册练习熟悉各种简写方式。

如设置一个圆形,设置div的样式为border-radius: 90px;

 可以同时设置1到4个值。(想想我们之前的margin与padding)如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

实现下图所示的半圆形,则需要设置样式height: 90px;

border-radius: 90px 90px 0 0;

006zipb5zy79ISnkrxF23&690 

表格运用圆角需要要 border-collapse: separate;

当圆角半径小于或等于边框宽度时,元素内角是直角

006zipb5zy79ISog7Lg4e&690 

 

 

 

转载于:https://my.oschina.net/u/2971691/blog/865185

你可能感兴趣的文章
Code Lock
查看>>
nginx学习之静态内容篇(五)
查看>>
19.04.02笔记
查看>>
vim常用命令总结 (转)
查看>>
bzoj1688[Usaco2005 Open]Disease Manangement 疾病管理*
查看>>
使用Mycat构建MySQL读写分离、主从复制、主从高可用
查看>>
自我介绍
查看>>
ConfigrationSection配置应用示例
查看>>
Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException
查看>>
【原】Java学习笔记020 - 面向对象
查看>>
开放平台鉴权以及OAuth2.0介绍
查看>>
liunx学习笔记(一:常用命令)
查看>>
《深入理解计算机系统》读书随笔-位操作
查看>>
${pageContext.request.contextPath} JSP取得绝对路径
查看>>
Android使用自定义View时:Error inflating class错误的原因。
查看>>
kail安装和vmtools安装
查看>>
.Net中如何操作IIS(源代码)
查看>>
MyBatis关联查询、多条件查询
查看>>
【leetcode】589. N-ary Tree Preorder Traversal
查看>>
Matlab之print,fprint,fscanf,disp函数
查看>>