欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

偏门却又实用的 CSS 样式

程序员文章站 2022-04-13 15:28:54
::-Webkit-Input-Placeholder input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。 配合 opacity 属性使用效果更好 Outline 当点击Input元素时显示的 ......

::-webkit-input-placeholder

input 的 h5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。

配合 opacity 属性使用效果更好

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>inpput_placeholder（输入框）</title>
    <style>
        input{
            color: red;
        }
        ::-webkit-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
          }
        ::-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-ms-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
    </style>
</head>
<body>
登录：<br>
<input type="text" placeholder="请输入账号"><br>
<input type="text" placeholder="请输入密码">
</body>
</html>　　　　　　

偏门却又实用的 CSS 样式

outline 当点击input元素时显示的当前状态线（外发光）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>outline 外发光</title>
    <style>
        input{
            width:400px;
            height:100px;
            font-size: 20px;
        }
        .txt_one{
            outline: none;
        }
        .txt_two{
            outline:none;
            box-shadow: green 1px 1px 30px 5px;
        }
        p{
            width:500px;
            height: 200px;
            border: 1px solid red;
            margin: 30px auto;
        }
    </style>
</head>
<body>
<input type="text" class="txt_one" placeholder="请点击这三个输入框比较效果">
<input type="text" class="txt_two" placeholder="请点击这三个输入框比较效果">
<input type="text" class="txt_three" placeholder="请点击这三个输入框比较效果">
<br>
<p>
    边框阴影（box-shadow）的基本语法：<br>

box-shadow：color  h-shadow  v-shadow blur spread  inset；<br>

color：阴影颜色 ------------ 可选 <br>

h-shadow ：水平偏移量 ----必选 <br>

v-shadow：垂直偏移量-----必选 <br>

blur：模糊距离 -------------可选 <br>

spread：阴影尺寸---------- 可选 <br>

inset：内阴影 --------------可选 <br>
</p>
</body>
</html>

偏门却又实用的 CSS 样式

contenteditable 设置element是否可编辑

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>contenteditable 设置element（标签）可否编辑</title>
</head>
<body>
<p contenteditable="true">可编辑</p>
<span contenteditable="false">不可编辑</span>
</body>
</html>

偏门却又实用的 CSS 样式

webkit-playsinline

手机video 都可以在页面中播放，而不是全屏播放了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。
html里video必须加上webkit-playsinline属性 <br>
<video id="video" controls="controls" webkit-playsinline="true" src="zaa47.mp4">
    <!--src是视频的路径-->
your browser does not support html5 video.
</video>
</body>
</html>

偏门却又实用的 CSS 样式

position: absolute， 让margin有效的

设置left:0, right:0 就可以。原因是2边都是0不存在边距，element就可以得出距离，并居中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>positon: absolut （让margin更有效）</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

这个太简单了，不发了。

使用 clearfix 清楚浮动，解决父类高度崩塌。

.clearfix {
    zoom: 1;
}

.clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

这个不知道怎么说

user-select 禁止用户选中文本

div {
    user-select: none; /* standard syntax */
}

::-webkit-scrollbar-thumb可以修改谷歌的滚动条样式，safari好像也可以

使用css transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

transform-style: preserve-3d 让元素支持3d

div {
    -webkit-transform: rotatey(60deg); /* chrome, safari, opera */
    -webkit-transform-style: preserve-3d; /* chrome, safari, opera */
    transform: rotatey(60deg);
    transform-style: preserve-3d;
}

perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
    perspective: 400px; 
}

css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

常用的选择器 :nth-child() selector

以下代码是选择父类下第一个子节点，p元素，建议学习这个样式属性的使用，很实用的。

p:nth-child(1) {
    ...
}

css3 linear-gradient 线性渐变默认开始在top, 也可以自定义方向。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css3 linear-gradient 线性渐变</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
            float: left;
        }
        p{
            clear: both;
        }
        .txt1{
            background: linear-gradient(aqua,red);
        }
        .txt2{
            background: linear-gradient(aqua,black 50%,red);
        }
        .txt3{
            background: linear-gradient(0deg,aqua 20%,black 50%,red 80%);
        }
        .txt4{
            background: linear-gradient(45deg,aqua,black 50%,red);
        }
        .txt5{
            background: linear-gradient(to top right,aqua,black 50%,red)
        }
    </style>
</head>
<body>
<div class="txt1"></div>
<div class="txt2"></div>
<div class="txt3"></div>
<div class="txt4"></div>
<div class="txt5"></div>
<br>
<p><br>
    下述值用来表示渐变的方向，可以使用角度或者关键字来设置： <br>
angle：
用角度值指定渐变的方向（或角度）。 <br>
to left： <br>
设置渐变为从右到左。相当于: 270deg <br>
to right： <br>
设置渐变从左到右。相当于: 90deg <br>
to top： <br>
设置渐变从下到上。相当于: 0deg <br>
to bottom： <br>
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <br>
color-stop 用于指定渐变的起止颜色： <br>
color：
指定颜色。 <br>
length：
用长度值指定起止色位置。不允许负值 <br>
percentage：
用百分比指定起止色位置。 <br>
</p>
</body>
</html>

偏门却又实用的 CSS 样式

上一篇： H5真机调试

下一篇： 003.etcd集群部署-静态发现

推荐阅读