轮廓、阴影和圆角

_洋

于 2022-04-11 16:35:57 发布

阅读量302

点赞数

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/mantou_riji/article/details/124101415

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

轮廓：outline
阴影：box-shadow
圆角：border-radius

轮廓：outline

outline用来设置元素的轮廓线，用法和border—模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小，即不会影响页面的布局。

border：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            border:sienna 20px solid;
            /* outline:sienna 20px solid; */
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <p>hello</p>
    
</body>
</html>

在这里插入图片描述

outline：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            /* border:sienna 20px solid; */
            outline:sienna 20px solid;
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <p>hello</p>
    
</body>
</html>

在这里插入图片描述
outline的应用场景：悬浮的时候设置outline，使之鼠标悬浮的时候显示。

阴影：box-shadow

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。
阴影默认在元素的正下方，即不会显示。
使用：box-shadow: 水平偏移量垂直偏移量模糊半径阴影的颜色 ;

第一个值：水平偏移量，设置阴影的水平位置：正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的水平位置：正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色，一般设置为 rgb（0，0，0，0-1之间的小数）

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);     
        }
    </style>

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

在这里插入图片描述

圆角：border-radius

border-radius 可以分别指定四个角的圈角
使用方法:border-radius:圆角半径的数值px
eg:
border-radius：50px;

参数情况：
四个值：左上、右上、右下、左下
三个值：左上、右上/左下、右下
两个值：左上/右下、右上/左下
一个值：所有角都一样
如果想要设置成椭圆，则传两个参数，第一个代表x方向圆的半径，第二个参数代表y方向远的半径，两个参数之间使用/分开

        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            border-radius: 20px/50px;
            /* box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);      */
        }

输出：
在这里插入图片描述

设置每个方向的圆角

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

如果想要设置椭圆角直接传两个参数即可，中间不需要使用/分隔

eg：

  border-bottom-right-radius: 10px 60px;

在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮廓、阴影和圆角

文章目录轮廓：outline阴影：box-shadow圆角：border-radius轮廓：outlineoutline用来设置元素的轮廓线，用法和border—模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小，即不会影响页面的布局。border：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" hr
复制链接

扫一扫