三个css属性

最新推荐文章于 2024-10-18 11:46:13 发布

everyStudy

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量214

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/everyStudy/article/details/141155259

版权

被忽视的css属性

caret-color 属性

 input {
            caret-color: red;
            /*
            caret-color 属性指定输入字段或任何可编辑文本区域中的插入符(文本光标)的颜色。
            它允许您自定义指示文本插入位置的闪烁垂直线的颜色。
            */
        }

accent-color 属性

 <div id="box">
        <input type="radio" class="input-radio " name="sex" value="1">测试1
        <input type="radio" class="input-radio " name="sex" value="2">测试2
    </div>

 .input-radio {
            accent-color: #ff00bf;
            /*
            accent-color属性用于指定元素内某些表单控件(例如单选按钮、复选框等)的强调颜色。
            该属性会覆盖浏览器的默认主题颜色，并将其替换为开发人员指定的颜色。
            */
        }

在这里插入图片描述

user-select属性

    <div id="box">
        <p> 这是一段可以选中的文字 </p>
        <h4>这是一段无法选中的文字 </h4>
    </div>

      h4 {
            user-select: none;
            /*
            user-select属性决定元素内文本的可选择性。
            当设置为none时，用户无法选择文本
            */
        }

在这里插入图片描述

    <div id="box">
        <section>
            一段测试文字
        </section>
    </div>

   #box {
           width: 200px;
           height: 200px;
           border-radius: 5px;
           background-image: url('https://gd-hbimg.huaban.com/4dbfe243893f74f04030bfe844aef08dbb9aaf3b145e9-0GGoSf_fw240webp');
           text-align: center;
           margin: auto;
       }
       #box  section{
           height: 100px;
           line-height: 30px;
           backdrop-filter: blur(15px);
           color: #fff;
       }
       /*
       backdrop-filter CSS 属性允许您对元素后面的内容应用各种效果。
       它通常用于模糊背景、更改其颜色或添加阴影.
       为创建现代网页设计(尤其是透明或半透明背景)提供强大的工具
       */