css的不常用效果总结
来源:互联网 发布:正元恒邦行情分析软件 编辑:程序博客网 时间:2024/05/29 04:51
前言
css的不常用效果总结,今天分享一下css的一些不常用效果,有些效果大家可能不常用,因此可能有些朋友都没有用过,今天带领大家一起过一下这些不常用效果。关于css的一些常用的效果,我之前也总结了,请看:http://www.haorooms.com/post/css_common
不常用效果总结如下几个,后面慢慢再补充
1、box-reflect文字倒影效果
效果演示如下:
属性参数介绍:
box-reflect:none | ? ? = above | below | left | right = | = none | | | | | 默认值:none
代码使用如下:
.reflect{ width:100%; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 50px/1.231 georgia,sans-serif; }
2、背景剪辑 background-clip
background用的很多,前面也有很多文章介绍,包括多背景设置等等http://www.haorooms.com/post/css3_bg_multi ,今天主要说下clip这个属性,这个属性的主要功能是背景裁剪,我们在ps中可能经常用到。具体语法如下:
background-clip:<box> [ , <box> ]*<box> = border-box | padding-box | content-box | text默认值:border-box
用的相对较多的是content-box和text,text可以做一些背景的文字。演示如下:
核心代码:
.text p{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}
3、text-fill-color 设置渐变字体
配合上面的clip,演示如下:
核心代码如下:
background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
4、direction 字体排版方向
语法:
direction:ltr | rtl默认值:ltr
tr:文本流从左到右。rtl:文本流从右到左。
文字正排和倒排,一般不常用!
5、font-stretch
设置或检索对象中的文字是否横向拉伸变形。文字的拉伸是相对于浏览器显示的字体的正常宽度。
语法:
font-stretch:ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded默认值:normal
取值:
ultra-condensed:比正常文字宽度窄4个基数。extra-condensed:比正常文字宽度窄3个基数。condensed:比正常文字宽度窄2个基数。semi-condensed:比正常文字宽度窄1个基数。normal:正常文字宽度semi-expanded:比正常文字宽度宽1个基数。expanded:比正常文字宽度宽2个基数。extra-expanded:比正常文字宽度宽3个基数。ultra-expanded:比正常文字宽度宽4个基数。
6、text-stroke
文字描边。
text-stroke:[ text-stroke-width ] || [ text-stroke-color ]
默认值:看每个独立属性
取值:
[ text-stroke-width ]:设置或检索对象中的文字的描边厚度[ text-stroke-color ]:设置或检索对象中的文字的描边颜色
代码案例:
.stroke p{ margin:50px auto 100px;font-size:100px; -webkit-text-stroke:1px #f00;}
7、tab-size
设置对象中的制表符的长度。
语法:
word-wrap: | 默认值:8
pre{background:#eee;-moz-tab-size:4;-o-tab-size:4;}
8、content
用来和:after及:before伪元素一起使用,在对象前或后显示内容。
9、quotes
使用书名号等引用。
10、颜色翻转
.normal { filter: invert(0%);}.inverted { filter: invert(100%);}
11、writing-mode
writing-mode属性很早就有了,只不过最早是IE提出来的。现在基本上大多数浏览器都支持了!
语法:
/* 关键字值 */writing-mode: horizontal-tb; /* 默认值 */writing-mode: vertical-rl;writing-mode: vertical-lr;/* 全局值-关键字inherit IE8+,initial和unset IE13才支持 */writing-mode: inherit;writing-mode: initial;writing-mode: unset;
一般用于文字的竖排版:
例如,css如下写法:
.verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}/* IE7比较弱,需要做点额外的动作 */.verticle-mode { *width: 120px;}.verticle-mode h4,.verticle-mode p { *display: inline; *writing-mode: tb-rl;}.verticle-mode h4 { *float:right;}
html如下下:
<div class="verticle-mode"> <h4>咏柳</h4> <p>碧玉妆成一树高,<br>万条垂下绿丝绦。<br>不知细叶谁裁出,<br>二月春风似剪刀。</p></div>
我们就可以看到古诗文的竖排了!
12、 pointer-event
字面理解是点击鼠标事件,值分别是auto和none,当使用pointer-events:none,表示它将捕获不到任何点击。假如一个a标签,我们不想让其点击,可以使用pointer-event:none
演示如下:
上面的代码如下:
<div style="pointer-events: none;"><a href="http://www.haorooms.com/">我有链接,但是点击不到我</a></div>
虽然有a标签,但是我们点击这个标签是没有效果的!
上面的也可以这么写,点击也是没有效果的!
<div ><a href="http://www.haorooms.com/" style="pointer-events: none;">我有链接,但是点击不到我</a></div>
大家可以测试看一下哦!
- css的不常用效果总结
- css常用效果总结
- css常用效果总结
- css常用效果总结
- css工作中常用的效果总结
- 常用的CSS动画效果
- 常用的CSS总结
- 一些不常用的CSS
- 不常用的CSS属性
- CSS一些常用的总结
- 不常用的知识点总结
- Css常用效果总结 — 快速查询笔记
- css 常用效果集锦
- 常用CSS效果
- css星级效果总结
- CSS透明效果总结
- CSS实现的排行榜效果,不使用OL
- css背景居中,固定,不重复的效果
- 从Excle导入到Oracle数据库方法总结
- 前端sublime-text3 这些就够了
- Oracle、Mysql之事务及四大特性
- 将自己的vim打造成IDE
- restful接口总结
- css的不常用效果总结
- JqGrid动态列实现
- python网络系列之一(urllib2的基本用法)
- 计算机视觉与摄影测量
- MyBatis Generator(MBG)MySql使用说明 无符号字段
- Tensorflow入门四 CNN(极简主义)
- wireshark怎么抓包、wireshark抓包详细图文教程,简单介绍(及wireshark与wireshark legacy差别 )
- easyUI中tab页的隐藏和显示
- [effectiv c++]条款2:尽量以const,enum,inline替换#define(static,const定义式)