css3属性target 文本阴影边框阴影浏览器前缀

最新推荐文章于 2024-09-10 18:41:00 发布

m0_65557920

最新推荐文章于 2024-09-10 18:41:00 发布

阅读量199

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_65557920/article/details/123238921

版权

目标伪类选择器

：target

一般与锚点结合使用，当点击时候，target就会触发，显示出样式

 body{
            background-color: black;
        }
        .box{
            width: 750px;           
            margin: 50px auto;
            padding: 5px;
            background-color: gray;
        }
        a{
            display: block;
            text-decoration: none;
            width: 100%;
            height: 50px;
            background: linear-gradient(#cbcbcb, #8f8f8f);
            font: 22px/50px "微软雅黑";
            border-radius:8px;
            position: relative;
            color: black;
            padding-left: 10px;
            box-sizing: border-box;
            
        }
        i{
            position: absolute;
            border: 8px solid;
            border-color: #fff transparent transparent transparent;
            top: 22px;
            right: 5px;
        }
        p{
            height: 0;
            overflow:hidden;
            font-size: 8px;
        }

       .box div:target a{
           color: wheat;
           background: linear-gradient(#67aefc, #2488dd);
       }
       .box div:target i{
           border: transparent #fff transparent transparent;
           position: absolute;
           top: 5px;
           right: 5px;
       }
       .box div:target p{
           height: 150px;
           color:black;
           overflow-y: scroll;
           background-color: gray;

       }

文本阴影：

text-shadow：水平垂直模糊颜色，水平垂直模糊颜色.....

边框阴影

box-shadow：水平位置垂直位置模糊距离阴影大小颜色 inset/默认外边

水平、垂直可以是负值

浏览器前缀

-webkit- 谷歌浏览器、国内浏览器

-o- Opera浏览器

-moz- 火狐浏览器

-ms- IE浏览器