CSS学习

最新推荐文章于 2022-05-31 15:21:06 发布

原创最新推荐文章于 2022-05-31 15:21:06 发布 · 756 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文介绍了CSS中的border-radius属性如何创建圆角边框，详细解释了参数设置及其对形状的影响。同时，探讨了box-shadow属性用于实现盒子阴影的语法和效果，包括水平和垂直偏移、模糊距离、阴影颜色等。此外，还提到了text-shadow属性在创建文字阴影方面的应用。

圆角边框

border-radius 属性用于向元素添加圆角边框（如下效果）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            height: 15px;
            width: 300px;
            border: 1px solid red;
            border-radius: 7px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

语法如下：

border-radius：length

radius（半径）：即圆的半径原理。

没有border-radius效果如左（我设置为16px的正方形），当需要变成圆形即将length值设置为宽/高的一半就可以。

<style>
        .one {
            height: 16px;
            width: 16px;
            border: 1px solid red;
            border-radius: 8px;
        }
    </style>

关于length值：

参数值可以为px也可以为百分比；

圆角矩形只需将参数值设为高度的一半；

有两个数值时，分别为（左上右下）（右下左上）

也可以使用border-top-left-radius（此类顺序不可颠倒）来对某一个角进行圆角化。

盒子阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow（必须带有）：水平阴影位置（阴影在水平轴上移动）

v-shadow（必须带有）：垂直阴影位置（阴影在垂直轴上移动）

blur（选择带有）：模糊距离（影子虚实）

spread（选择带有）：阴影尺寸（阴影大小）

color（选择带有）：阴影颜色（一般为ragb（半透明））

inset（选择带有）:将默认的外部阴影（outside）改为内部阴影；

注：

外部阴影为默认，写上无效。

盒子阴影不占空间，不影响其他盒子的存放；

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:300px;
    height:100px;
    background-color:#ff9900;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

文字阴影

text-shadow: h-shadow v-shadow blur color;

类似盒子阴影

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。