【前端-CSS】轮廓、阴影、圆角_前端的轮廓-CSDN博客

本文链接：https://blog.csdn.net/CactusStory_/article/details/104794855

轮廓

outline：设置元素轮廓线，用法与border一样，但加上轮廓并不会影响到可见框的大小
border与outline的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于轮廓、阴影和圆点</title>

    <style>
        .boxOne{
            width: 200px;
            height: 200px;
            background-color: palevioletred;    

      
        }

       .boxOne:hover{
            border: rgb(230, 159, 170) inset 10px;
             /* outline:  rgb(230, 159, 170) inset 10px; ;  */
        } 

    </style>
</head>
<body>
    <div class="boxOne"></div>
    <span>hello</span>
</body>
</html>

（1）border效果
在这里插入图片描述（2）outline效果

在这里插入图片描述

阴影

box-shadow：设置元素阴影效果，默认情况下与原盒子重合
用法：box-shadow：a b c d;
a：水平偏移量，正值右移，负值相反
b：垂直偏移量，正值下移，负值相反
c：阴影模糊半径，值越大越模糊
d：阴影颜色
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于轮廓、阴影和圆点</title>

    <style>
        .boxOne{
            width: 200px;
            height: 200px;
            background-color: palevioletred;    
            box-shadow:10px 10px 20px rgb(180, 51, 79);   
      
        }

    </style>
</head>
<body>
    <div class="boxOne"></div>
</body>
</html>

效果
在这里插入图片描述

圆角

border-radius：设置圆角的半径大小
用法：
设置元素为圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于轮廓、阴影和圆点</title>

    <style>
        .boxOne{
            width: 200px;
            height: 200px;
            background-color: palevioletred;    
            border-radius: 50% ;
        }

    </style>
</head>
<body>
    <div class="boxOne"></div>
</body>
</html>

在这里插入图片描述