经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
偏门却又实用的 CSS 样式
来源:cnblogs  作者:GuQi_Domon  时间:2019/1/10 9:21:39  对本文有异议

::-Webkit-Input-Placeholder

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

配合 opacity 属性使用效果更好

  1. <!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>      

Outline 当点击Input元素时显示的当前状态线(外发光)

  1. <!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>

Contenteditable 设置Element是否可编辑

  1. <!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>

Webkit-Playsinline

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

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body>用html5的video方式播放视频时,在ipad上是默认原来大小的,而在iphone上是默认全屏播放的。
  2. 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>

Position: Absolute, 让Margin有效的

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

  1. <!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 清楚浮动,解决父类高度崩塌。

  1. .clearfix {
  2.     zoom: 1;
  3. }
  4.  
  5. .clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/
  6.      visibility: hidden;
  7.      display: block;
  8.      font-size: 0;
  9.      content: " ";
  10.      clear: both;
  11.      height: 0;
  12.  }

这个不知道怎么说

User-Select 禁止用户选中文本

  1. div {
  2.     user-select: none; /* Standard syntax */
  3. }

::-Webkit-Scrollbar-Thumb可以修改谷歌的滚动条样式,safari好像也可以

使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug

  1. -webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单

  1. -webkit-touch-callout: none;

Transform-Style: Preserve-3d 让元素支持3d

  1. div {
  2.     -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
  3.     -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
  4.     transform: rotateY(60deg);
  5.     transform-style: preserve-3d;
  6. }

Perspective 透视

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

  1. .div-box {
  2.     perspective: 400px; 
  3. }

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

  1. //不换行
  2. white-space:nowrap;
  3.  
  4. //自动换行
  5. word-wrap: break-word; 
  6. word-break: normal; 
  7.  
  8. //强制换行
  9. word-break:break-all;

常用的选择器 :Nth-Child() Selector

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

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

Css3 Linear-Gradient 线性渐变默认开始在top, 也可以自定义方向。

  1. <!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:
  2. 用角度值指定渐变的方向(或角度)。 <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:
  3. 指定颜色。 <br>length:
  4. 用长度值指定起止色位置。不允许负值 <br>percentage:
  5. 用百分比指定起止色位置。 <br></p></body></html>

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号