CSS3圆角、盒阴影与边框图片的具体详解

今天开始整理CSS3的知识

其实应该是昨晚写的，不过好像是急性肠胃炎了，痛的一晚上没睡着，蓝瘦香菇
还好今天打点滴睡一觉就好了，看来这吃东西还是注意点好，被我的胃肠报复了
CSS没什么难的，不过看的同时自己要在浏览器上试一试，试一遍就记住了
光看不做白看

---

CSS3各个浏览器是存在兼容问题的
不同浏览器有不同前缀的私有属性，表示属性或规则还没有成为标准
换句话说，官方还没公布标准的时候，各个浏览器已经偷摸实现了
但是真正标准未来不一定是什么样子，怎么办，那就加前缀吧
虽然现在新版本浏览器不用加前缀，但保证兼容还是要写

chrome/safari	-webkit
firefox	-moz
IE	-ms
opear	-o

border-radius圆角

radius这个单词是半径的意思
CSS3之前要想实现这种效果，最好的办法恐怕只能利用Photoshop了
通过这个属性可以给我们的元素加“圆角”
比如我们把一个元素变成圆

<p class="demo"></p>

登录后复制

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 50%;}

登录后复制

为什么值是border-radius属性值是50%就变成了一个圆呢？
凭我们对CSS的理解它一定是一个复合属性它等价border-radius: 50% 50% 50% 50%;
border-radius可以拆分为

• border-top-left-radius：边框左上角的弧度

• border-top-rigtht-radius：边框右上角的弧度

• border-bottom-left-radius：边框左下角的弧度

• border-bottom-rigtht-radius：边框右下角的弧度

所以它和下面的代码等价，但是我们不要写这么麻烦的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 50%;    border-top-right-radius: 50%;    border-bottom-left-radius: 50%;    border-bottom-right-radius: 50%;}

登录后复制

就拿这个border-top-left-radius: 50%来说

实际上它相当于在元素盒的坐上画一个矩形，矩形的宽高就是元素的一半（50%）
并且以靠近元素内部的点为圆心画弧
于是四个属性合在一起，就成了一个圆

这个属性还可以更复杂
下面的代码是等价的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 10px 20px;    border-top-right-radius: 20px 30px;    border-bottom-right-radius: 30px 40px;    border-bottom-left-radius: 40px 50px;}

登录后复制

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;}

登录后复制

注意顺序是顺时针：左上、右上、右下、左下
这样丧心病狂的写法还真的不常见
子属性看起来是复合属性border-top-left-radius: 10px 20px;
但其实不是，好奇的我尝试了一下发现并没有border-top-left-radius-x这个属性
第一个数字表示矩形x轴方向的距离，第二个数字表示矩形y轴方向的距离，
不要让前面的top-left误导你
css中所有类似属性的都是x轴在前，y轴在后
比如background-position复合属性就是background-position-x在前，background-position-y在后

通过这个好玩的属性，我们可以做半圆

.demo {    width: 200px;    height: 100px;    background-color: orangered;    border-radius: 100px 100px 0 0 / 100px 100px 0 0;}

登录后复制

做一个叶子

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;}

登录后复制

和我们的padding、margin等复合属性类似

写1个值 border-radius: 10px –> ↖/↗/↘/↙
写2个值 border-radius: 10px 20px –> ↖/↘，↗/↙
写3个值 border-radius: 10px 20px 30px –> ↖，↗/↙，↘
写4个值 border-radius: 10px 20px 30px 40px –> ↖，↗，↘，↙

相信大家懂我的意思

box-shadow盒阴影

我给上面我们写的叶子加一行代码

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 10px 20px;}

登录后复制

产生了影子的效果，属性值就是x轴的偏移量和y轴的偏移量
此外还有一些可选的属性值：阴影模糊半径、阴影扩展半径、阴影颜色、投影方式
同时一个盒子可以拥有多个阴影，用逗号隔开就好了

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 20px 20px 5px 5px green,                40px 40px 5px 5px;}

登录后复制

至于投影方式默认是外投影，我们可以设置属性值inset变成内投影
比如做一个月食的效果

.demo {    width: 200px;    height: 200px;    background-color: black;    border-radius: 50%;    box-shadow: 40px 40px 0 0 yellow inset;}

登录后复制

border-image边框图片

首先我需要一张作为边框图片的资源

我拿的这张图片的大小是81px*81px
border-image也是一个复合属性，子属性有这些

• border-image-source：图像来源路径

• border-image-slice：指定图像的边界向内偏移

• border-image-repeat：边框图像的平铺方式

• border-image-width ：边框宽度
  （border-image-outset用不上不讲了）

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png');}

登录后复制

只写一个图片资源样子会很奇怪

我们先加上裁剪属性值

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27;}

登录后复制

注意它没有单位（默认px），也可以用百分比的形式
这里的27表示对图片四个方向（上右下左）都从外向里裁剪27px变成一个九宫格

然后将四个角的图片放到边框的四个角
将剩下的部分（中间的扔掉）拉伸（默认）放到边框余下的位置
如果你想裁剪不同像素，可以分开写

比如border-image: url('border.png') 10% 20% 30% 40%;
九宫格就会被划成这样

平铺方式一下有几种

• stretch 拉伸

• repeat 平铺

• round 铺满（拉伸平铺）

默认的就是stretch拉伸
现在我把盒子宽度变为200px，再来比较这三种方式的区别

.demo { /*①拉伸*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 stretch;}

登录后复制

拉伸就是把图片自适应拉开

.demo { /*②平铺*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 repeat;}

登录后复制

平铺会把裁剪的图片放到中间的位置，然后向两边重复

.demo { /*③铺满*/
    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 round;}

登录后复制

铺满是拉伸和平铺的结合，不会造成上面的切割效果（毫无违和感）
当然它会尽可能重复多个小方格

我们可以再调整边框图片的宽度
比如说我要调整为20px
在裁剪属性值后加‘/’写上要调整的宽度值

.demo {    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27/20px round;}

登录后复制

今天这个就不总结了，都在上面了

以上就是CSS3圆角、盒阴影与边框图片的具体详解的详细内容，更多请关注Work网其它相关文章！