css——圆角、阴影、透明

aa40

于 2022-11-06 19:49:17 发布

阅读量755

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_63157974/article/details/127720001

版权

1. 圆角

border-radius 圆角，让矩形盒模型拥有圆弧边缘；

取值通常使用百分比值 或 像素值 ；

值最多可为4个：

四个值：左上右上右下左下

三个值：左上右上左下右下

两个值：左上右下右上左下

一个值：四个角同一值

圆角可以分解为更细的分解属性，比如左上角：border-top-left-radius

2. 阴影

box-shadow盒子阴影，让盒子四周产生阴影；

div{
    box-shadow:10px 5px 10px 5px red outset;
    /*
        第一个值：水平偏移（必需）
        第二个值：垂直偏移（必需）
        第三个值：模糊距离（可选，默认0）   从扩散边缘开始，向外逐渐模糊的距离
        第四个值：扩散距离（可选，默认0）   规则从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
        第五个值：隐藏颜色（可选，默认黑色）
        第六个值：阴影扩散方向（可选，默认ouset向外扩展，可以改为inset向内扩展）
    */
}