CSS3圆角、盒阴影与边框图片

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

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

---

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

浏览器	前缀
chrome/safari	-webkit
firefox	-moz
IE	-ms
opear	-o

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

<div class="demo"></div>

.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%