CSS之轮廓和阴影效果

最新推荐文章于 2023-11-09 08:06:00 发布

极客研究者

最新推荐文章于 2023-11-09 08:06:00 发布

阅读量831

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105570949

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

**outline:**为元素添加轮廓
格式和border一样
轮廓和边框不同点在于:轮廓不会影响可见框大小

box-shadow属性：用来设置元素的阴影效果,不会影响页面的布局
第一个值:水平偏移量设置阴影的水平位置正值向右移动,负值向左移动
第二个值:垂直偏移量设置阴影的垂直位置正值向下移动,负值向上移动
第三个值:阴影的模糊半径
第四个值:设置阴影的颜色

border-radius:用来设置圆角,设置圆的圆角半径

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮廓</title>
    <style>
    .box{
        width:100px;
        height:100px;
        background-color: greenyellow;
        box-shadow: 10px 10px 10px  rgba(0,0, 0, .3);
        /* outline:10px solid red; */
        /* border-radius: 10px;; */
        /* 
        border-top-left-radius:左上角
        border-top-right-radius:右下角
        border-bottom-left-radius:左下角
        border-bottom-right-radius:右下角

        第一个值:水平方向的半径大小
        第二个值:垂直方向的半径大小
        只设置一个,表示水平和垂直方向半径大小相等

        */

        /* 设置左上角 */
        /* border-top-left-radius:10px 20px; */
        
        /* 设置四个方向的半径 
        四个值:左上角、右上角、右下角、左下角
        三个值:左上  右上/左下、右下
        两个值:左上/右下、右上/左下
        一个值:全部一样

        值1/值2: 
        值1：X轴的半径大小
        值2：Y值的半径大小
        */
        /* border-radius:10px 20px 40px 50px; */
        /* border-radius:10px 20px 40px; */
        /* border-radius:20px 40px; */

        /* border-radius:20px / 40px; */

        /* 将元素设置为圆形 */
        border-radius: 50%;

        
    }
    .box:hover{
        border: 10px solid red;
    }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之轮廓和阴影效果

**outline:**为元素添加轮廓格式和border一样轮廓和边框不同点在于:轮廓不会影响可见框大小box-shadow属性：用来设置元素的阴影效果,不会影响页面的布局第一个值:水平偏移量设置阴影的水平位置正值向右移动,负值向左移动第二个值:垂直偏移量设置阴影的垂直位置正值向下移动,负值向上移动第三个值:阴影的模糊半径第四个值:设置阴影的颜色border-radius:...
复制链接

扫一扫