CSS新增样式----圆角边框、盒子阴影、文字阴影

最新推荐文章于 2024-04-30 09:57:08 发布

从未止步..

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量1.1k

点赞数 2

分类专栏： Javaweb基础~ 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_64365419/article/details/128223542

版权

Javaweb基础~ 专栏收录该内容

16 篇文章 10 订阅

订阅专栏

在CSS中新增了三个样式，分别是圆角边框，盒子阴影，文字阴影。

初识圆角边框：

border-radius属性用于设置元素的外边框圆角

语法如下：

border-radius:length;

原理如下：

[椭]圆与边框的交集形成圆角效果。

在这里插入图片描述举例：

当length为10px时：

div{
        width: 100px;
        height: 100px;
        background-color:chocolate;
        border-radius: 10px;
       }

显示效果如下：

在这里插入图片描述当length为40px时：

  div{
        width: 100px;
        height: 100px;
        background-color:chocolate;
        border-radius: 40px;
       }

在这里插入图片描述由此可见，length越大，越接近圆形，length既可以是数值也可以是百分比的形式。

将正方形/矩形转变为圆形：

方法：如果是正方形，直接将length设置为高度或者宽度的一般即可，或者直接写50%，如果是矩形，设置为高度的一半即可

这里我们以将正方形转变为圆形进行举例。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       .div1{
        width: 100px;
        height: 100px;
        background-color:chocolate;
       }
       .div2{
        width: 100px;
        height: 100px;
        background-color:cornflowerblue;
        border-radius: 50px;
       }
    </style>
</head>
<body>
    <div class="div1"></div> 
    <div class="div2"></div>
</body>
</html>

显示效果如下：

在这里插入图片描述

length的不同设置方法：

此外length可以使用一个、两个，四个具体的数值进行替换，一个值---------代表设置上下左右四个角均为相同的圆角度，两个值-----------代表设置对角线的角采用相同的值，四个值--------------代表分别设置上下左右四个角都有各自不同的值[顺时针的顺序—左上角、右上角、右下角、左下角]。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       .div1{
        width: 200px;
        height: 200px;
        background-color: darkmagenta;
       }
       .div2{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        border-radius: 30px;
       }
       .div3{
        width: 200px;
        height: 200px;
        background-color:cyan;
        border-radius: 20px 60px;
       }
       .div4{
        width: 200px;
        height: 200px;
        background-color:darkslateblue;
        border-radius: 20px 40px 60px 80px;
       }
    </style>
</head>
<body>
    <div class="div1">矩形</div>
    <div class="div2">为四个角分别设置相同的length</div>
    <div class="div3">为主/副对角线的角设置不同的length</div>
    <div class="div4">为四个角分别设置不同的length</div>
</body>
</html>

显示如下：

在这里插入图片描述

设置单独的圆角边框：

语法如下：

border-top-left-radius: ;//设置左上角的圆角边框
border-top-right-radius: ;//设置右上角的圆角边框
border-bottom-left-radius: ;//设置左下角的圆角边框
border-bottom-right-radius: ;//设置右下角的圆角边框

但由于这种写法比较冗余，所以一般情况下并不推荐使用。

盒子阴影：

在CSS3中，我们可以使用box-shadow属性将阴影应用于盒子。

语法：

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

在这里插入图片描述

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
        width: 200px;
        height: 200px;
        background-color: coral;
        box-shadow: 4px 4px 4px 5px burlywood;
      }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示如下：

在这里插入图片描述 h-shadow:值越大，阴影在水平轴上距离盒子越远，如果是正值，阴影位于盒子右边，如果是负值，阴影位于盒子左边。

举例：设置h-shadow为10px

显示效果如下：

在这里插入图片描述举例：设置h-shadow为-10px

显示效果如下：
在这里插入图片描述 v-shadow：值越大，阴影在垂直轴上距离盒子越远，如果是正值，阴影位于盒子下边，如果是负值，阴影位于盒子上边

举例：设置v-shadow为20px

显示效果如下：
在这里插入图片描述举例：设置v-shadow为-20px

显示效果如下：
在这里插入图片描述 blur:值越大，阴影部分越模糊。

设置blur的值为10px.

显示如下：

在这里插入图片描述设置blur的值为1px,显示如下：

在这里插入图片描述 spread：值越大，阴影的尺寸越大。

将spread的值设置为20px,显示如下：

在这里插入图片描述将spread的值设置为1px,显示如下：

在这里插入图片描述 color:用来设置阴影的颜色，虽然颜色是自定义的，但是，我们一般都用较模糊的黑色来作为阴影的颜色。

举例：

将颜色设置为rgb(0，0， 0， .3),显示如下：

在这里插入图片描述 inset：将阴影设置为内部阴影，只需要在box-shadow的属性值后面添加inset即可实现。

显示效果如下：

在这里插入图片描述 注：默认的是外部阴影(outset),但是不可以写这个单词，否则会导致阴影无法正确显示。

虽然盒子模型在网页上显示一定的效果，但是它并不占用空间，带有阴影效果的盒子的相邻盒子之间并不会相隔阴影尺寸的大小，而是紧挨着它

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
        width: 200px;
        height: 200px;
        background-color: coral;
        box-shadow: 4px 4px 4px 5px burlywood;
        float:left
      }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

显示如下：

在这里插入图片描述

文字阴影：

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

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

在这里插入图片描述与盒子阴影基本相同，只是在参数个数上比盒子阴影少了两个。

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        h1 {
            font-size: 40px;
            font-family: 'Courier New', Courier, monospace;
            color: hotpink;
            text-shadow: 4px 4px 4px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <h1>我是美女</h1>
</body>

</html>

显示如下：

在这里插入图片描述

从未止步..

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS新增样式----圆角边框、盒子阴影、文字阴影

在CSS中新增了三个样式，分别是圆角边框，盒子阴影，文字阴影。border-radius属性用于设置元素的外边框圆角语法如下：原理如下：[椭]圆与边框的交集形成圆角效果。举例：当length为10px时：显示效果如下：当length为40px时：由此可见，。方法：如果是正方形，直接将length设置为高度或者宽度的一般即可，或者直接写50%，如果是矩形，设置为高度的一半即可这里我们以将正方形转变为圆形进行举例。举例：显示效果如下：此外length可以使用一个、两个，四个具体的数值进行替换，一个值--
复制链接

扫一扫