CSS3- css3新增样式（圆角边框border-radius、边框图片border-image、盒子阴影box-shadow）

​

个人主页：王子玉博客

收录专栏：HTML&CSS

❤️ 分享网站： 《Python自学网》基础入门到逐步深入 | 适合新手入门到精通

体系课程：web开发、爬虫、自动化运维、自动化测试、GUI图形界面化

HTML& CSS系列文章类目

内容序列	文章链接
HTML& CSS（1）	HTML与HTML5 知识点梳理总结
HTML& CSS（2）	CSS - 初识 css（DOM树、引入方式、书写规则）
HTML& CSS（3）	CSS - 选择器（一文了解全部选择器及用法）
HTML& CSS（4）	CSS - 深入了解（三大特性、css权重、属性值计算过程）
HTML& CSS（5）	CSS - 常用样式属性（字体、文本、背景相关、鼠标）

css3 是最新的 css标准，css3 向下兼容css2，利用css3 可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。

---

border-radius：圆角边框

为元素添加圆角边框

4个值（xy合并参数写法）

border-radius: 10px 20px 30px 40px; 
border-radius: top-left top-right bottom-right bottom-left;

• 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。（顺时针旋转）

全参数写法（了解）

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px; 

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

复合和单例写法

border-radius:2px;
/*对应单例写法为 */
border-top-left-radius:2px; /*左上角 */
border-top-right-radius:2px; /*右上角 */
border-bottom-right-radius:2px; /*右下角 */
border-bottom-left-radius:2px; /*左下角 */


border-radius: 2px 1px 4px / 5px 3px;  
/*对应单例写法为*/
border-top-left-radius: 2px 5px; /* top-left-x为2px top-left-y为5px*/
border-top-right-radius: 1px 3px;
border-bottom-right-radius: 4px px;
border-bottom-left-radius: 1px 3px;
/* x 方向对应容器宽度 y方向对应容器高度*/

1-4个值所对应的顺序

• 4个值：第1个值为左上角，第2个值为右上角，第3个值为右下角，第4个值为左下角
• 3个值；第1个值为左上角, 第2个值为右上角和左下角，第3个值为右下角
• 2个值；第1个值为左上角与右下角，第2个值为右上角与左下角
• 1个值： 4个圆角值相同

例子

作用在标签div上，统一css样式，后面只改变圆角属性的值的顺序来看变化。

/* 统一css样式*/
div{
    width: 150px;
    height: 150px;
    margin: 50px auto;
    background-color: #aec529;
}

4个值样式：border-radius: 10px 20px 30px 40px;

3个值样式：border-radius: 10px 20px 30px 40px;

2个值样式：border-radius: 10px 20px;

1个值样式：border-radius: 30px;

圆形：border-radius: 50%;

扇形：border-radius: 100% 0 0 0;

---

border-image： 边框图片（了解）

为元素添加图片作为边框

语法

border-image: source slice width outset repeat|initial|inherit;

border-image: url(border.jpg) 30 round;

属性值

属性值	描述
border-image-source	用于指定要用于绘制边框的图像的位置 路径
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)

---

box-shadow：盒子阴影

为盒子添加阴影效果

语法

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)

box-shadow: 2px 2px 6px 10px #eee inset;

属性值

属性值	注意	描述
h-shadow	必需。水平阴影的位置。允许负值	阴影水平偏移量，如果值为正值，则阴影在对象的右 边，为负值时，阴影在对象的左边
v- shadow	必需。垂直阴影的位置。允许负值	阴影垂直偏移量，如果为正值，阴影在对象的底部，为负值时，阴影在对象的顶部
blur	可选。模糊距离	其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
spread	可选。阴影的大小。允许负值	如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小
color	可选。阴影的颜色。rgba/ hex /rgb	如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一 致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数
inset	可选。将外部阴影 (outset) 改为内部阴影。	如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影

例子

div{
    width: 150px;
    height: 150px;
    margin: 50px auto;
    background-color: #3fec9c;
    box-shadow: 0 2px 6px 0 rgba(2, 122, 72, .5);
}