圆角边框
border-radius: 10px;
radius半径原理:(椭)圆与边框的交集形成圆角效果。
参数值可以是数值或百分比形式;如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半,或者写50%;如果是个矩形,设置为高度的一半就可以;该属性是一个简写属性,可以跟四个角,分别代表左上角,右上角,右下角,左下角;分开写:border-top-left-radius, border-top-right-radious。
<style>.yuanxing {width: 200px;height: 200px;background-color: aqua;/* border-radius: 100px; *//* 50%就是宽度和高度的一半 等价于100px */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: aquamarine;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}.radius {width: 200px;height: 200px;/* border-radius: 10px 20px 30px 40px; *//* border-radius: 10px 40px; */background-color: bisque;border-top-left-radius: 50px;}</style></head><body>1.圆形的做法:<div class="yuanxing"></div>2.圆角矩形的做法:<div class="juxing"></div>3.可以设置不同的圆角:<div class="radius"></div></body>
盒子阴影
box-shadow:h-shadow v-shadowblur spread color inset;
注意:
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效;盒子阴影不占用空间,不会影响其他盒子排列。文字阴影
text-shadow:h-shadow v-shadow blur color;