Html+Css小tips:轮廓阴影和圆角

最新推荐文章于 2024-07-11 22:36:37 发布

嘀啦哒

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量108

点赞数

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/weixin_48451943/article/details/119764304

版权

轮廓：boder和outline

outline 用来设置元素的轮廓线，用法和border一模一样。
特殊点：outline的轮廓线不会影响到可见框的大小。例如：如果框的下面有文字outline不会使文字下移，border会。

阴影：box-shadow

<!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>
        .box1{
            width: 200px;
            height: 200px;
             background-color: blue;

             box-shadow: 60px 10px 5px rgba(0, 0, 0, .3);

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述
box-shadow用于设置元素阴影效果，阴影不会影响到页面布局
第一个值水平偏移量设置阴影的水平位置：正右负左
第二个值竖直偏移量设置阴影上下位置：正下负上
第三个值阴影模糊半径
第四个值阴影颜色

圆角：border-radius

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
用于设置圆角，圆角设置的圆的半径大小
顺时针四个值，可以分别设置圆角大小：左上、右上、右下、左下
顺时针三个值，可以分别设置圆角大小：左上、右上/左下、右下
顺时针两个值，可以分别设置圆角大小：左上/右下、右上/左下

ps:椭圆角可以设置两个数值
pps:border-radius:50% 可以将元素设置为圆形

嘀啦哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html+Css小tips:轮廓阴影和圆角

轮廓：boder和outlineoutline 用来设置元素的轮廓线，用法和border一模一样。特殊点：outline的轮廓线不会影响到可见框的大小。例如：如果框的下面有文字outline不会使文字下移，border会。阴影：box-shadow<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
复制链接

扫一扫