css小技巧--样式计算-模糊文字-多重边框-指针事件-竖向文字-元素裁剪
2016-12-05 15:13
633 查看
样式计算
在CSS中也可以进行简单的计算通过calc函数可以实现
这样还可以使我们的元素自适应
当然计算的值应该是合法的值
.demo { ... width: calc(100% - 500px); height: 200px; }1
2
3
4
5
这个demo中,元素的宽度值是父元素宽度减去500像素
如果父元素是body
改变视窗的大小,它的宽度也会随之改变
模糊文字
两行简单的代码就可以实现模糊文字的效果.demo { ... color: transparent; text-shadow: black 0 0 2px; }1
2
3
4
5
其实就是利用了我们熟悉的text-shadow配合前景色透明
实现类似滤镜的效果
多重边框
可能我们利用border和outline可以实现两层边框其实我们可以利用盒阴影实现多重边框的效果
.demo { ... box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 20px rgba(0, 0, 0, 0.2), 0 0 0 30px rgba(0, 0, 0, 0.2), 0 0 0 40px rgba(0, 0, 0, 0.2), 0 0 0 50px rgba(0, 0, 0, 0.2), 0 0 0 60px rgba(0, 0, 0, 0.2), 0 0 0 70px rgba(0, 0, 0, 0.2), 0 0 0 80px rgba(0, 0, 0, 0.2); }1
2
3
4
5
6
7
8
9
10
11
指针事件
pointer-events属性可以让我们控制光标在鼠标点击、拖拽等事件的行为a { pointer-events: none; }1
2
添加了这个样式后,链接就会失效
甚至鼠标悬浮在这个链接上都不会变成pointer的光标样式
书写模式-竖向文字
writing-mode属性用于指定书写模式这个属性是为了解决不是所有语言都是从左到右的书写习惯
比如说我想指定书写模式垂直方向从右向左
.demo { width: 100px; height: 100px; writing-mode: vertical-rl; border: 1px solid black; }1
2
3
4
5
6
元素裁剪
可能我们用过对图片裁剪的属性background-clip但其实css可以对元素裁剪
就是用clip属性
不过好像真的不常用
这个属性很娇气
它只有在absolute或fixed定位的时候才生效
这个属性这样用
.demo { ... position: absolute; clip: rect(20px,140px,140px,20px); }1
2
3
4
5
不过我在chrome浏览器上使用这个属性时
发现它和背景图片的裁剪还不太一样
四个像素值虽然同样分别对应上右下左
但是只有第一个值(上)和最后一个值(左)是指定裁剪多大的尺寸
而第二个值(右)和第三个值(下)更像是保留多大的尺寸
相关文章推荐
- CSS:表格样式(设置表格边框/文字/背景的样式)
- JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案
- CSS:表格样式(设置表格边框/文字/背景的样式)
- CSS border-right-style属性设置元素的右边框样式
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
- 计算文字在AutoCAD中所占的长度,和字体样式,字高,宽高必有关
- CSS 样式 层裁剪图片
- 用CSS写成的各种边框样式
- css 样式边框
- CSS:设置元素的边框
- css (文字链接表格)定制不同的样式
- [转]巧用CSS解决asp.net中Gridview边框样式问题
- CSS控制的文字段落左右对齐的样式
- 使用css改变表格边框样式
- css 设置网页边框滚动条样式
- css 文字按钮实现样式submit按钮以文本的形式显示出来
- css 样式控制文字长度,超出的以省略号代替
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- CSS 控制容器内文字个数,超出容器后显示省略号 小技巧,大用处
- 巧用CSS解决asp.net中Gridview边框样式问题