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

​

🌈个人主页：���子玉博客

🔆 收录专栏：HTML&CSS

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

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

HTML& CSS系列文章类目

文章目录

• • border-radius：圆角边框
  • • • 4个值（xy合并参数写法）
      • 全参数写法（了解）
      • 复合和单例写法
      • 1-4个值所对应的顺序
      • 例子
      • border-image： 边框图片（了解）
      • • • 语法
          • 属性值
          • box-shadow：盒子阴影
          • • • 语法
              • 属性值
              • 例子

                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);
                    }