5.1 CSS3圆角边框与阴影

CSS3

5.1圆角边框与阴影
圆角边框border-radius

四个子属性
每个属性的取值是这样的：如果是两个值的情况，就表示一个是水平方向的值，一个是垂直方向的值；如果是一个值的情况，就表示水平方向和垂直方向的值相等。

在这里插入图片描述
在这里插入图片描述

border-radius：25px；由于盒子本身的高度是50px，25px正好是高度的一半，所以添加的圆角相当于上下左右四个角的水平方向和垂直方向上都是25px，这样就出现左右两边是半圆的情况，如下图。
在这里插入图片描述

阴影box-shadow

在这里插入图片描述
阴影box-shadow，5个值， inset可选，无默认outset
在这里插入图片描述
在这里插入图片描述

posted @ 2022-10-08 01:20  昔痕  阅读(23)  评论(0)    收藏  举报