24.html设置轮廓、阴影、圆角

最新推荐文章于 2023-04-01 11:51:51 发布

Keeling1720

最新推荐文章于 2023-04-01 11:51:51 发布

阅读量1.7k

点赞数 3

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116090132

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

html设置轮廓、阴影、圆角

html设置轮廓、阴影、圆角

轮廓（outline）

轮廓跟border（边框）类似，唯一不同的是，border会影响布局，但是outline不会，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓、阴影、圆角</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
        }
        /*hover表示鼠标置于其上的话*/
        .box:hover{
            outline: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <text>I'm text!</text>
</body>
</html>

此时显示如下：
在这里插入图片描述
当我们把鼠标置于其上，则显示：

如果是border的话，他会把text往下挤，让text依旧清晰可见，这就是border和outline的区别。

阴影（box-shadow）

box-shadow用来设置元素的阴影效果，阴影效果不会影响页面布局
经常带有四个参数：
第一个参数是向右的偏移量（可不写），
第二个是向左的偏移量（可不写），
第三个是阴影的模糊半径（可不写），
第四个是颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓、阴影、圆角</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            box-shadow: 5px 10px 10px grey;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <text>I'm text!</text>
</body>
</html>

显示如下：（显然，阴影向右偏移5px，向下偏移10px，阴影颜色为grey。
在这里插入图片描述

圆角

圆角有好几个属性可以设置：
比较常用的是

border-radius:10px;

或者我个人比较常用的是：

border-radius:10%;

除此之外，还有

border-top-left-radius: 设置左上角圆角
border-top-right-radius: 设置右上角圆角
border-bottom-left-radius: 设置左下角圆角
border-bottom-right-radius: 设置右下角圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓、阴影、圆角</title>
    <style>
        .box{
            width:100px;
            height: 100px;
            background-color: #bbffaa;
            border-radius: 10px;
            /*border-radius: 10%;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

使用10px和10%px显示分别如下：
在这里插入图片描述

综上可知，其实是一样的，为什么呢？
因为100px的10%刚好是10px，所以，你懂了吧。这个多少像素跟百分之几的区别其实就是减少了咱去算准确数值的繁杂过程。使用百分比的话，后面如果想要更改其宽高的话，也比较方便。
顺便说下，如果圆角大于等于50%，那么这个盒子就会变成圆形，如下：
在这里插入图片描述
border-radius还可以带四个参数，分别指定左上、右上、右下、左下四个角度的圆角（从左上顺时针）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓、阴影、圆角</title>
    <style>
        .box{
            width:100px;
            height: 100px;
            background-color: #bbffaa;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述
或者
带三个参数，分别代表左上、右上/左下、右下
带两个参数，分别代表左上/右下、右上/左下

Keeling1720

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
24.html设置轮廓、阴影、圆角

文章目录html设置轮廓、阴影、圆角轮廓（outline）阴影（box-shadow）圆角html设置轮廓、阴影、圆角轮廓（outline）轮廓跟border（边框）类似，唯一不同的是，border会影响布局，但是outline不会，具体如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮廓、阴影、圆角</title>
复制链接

扫一扫