当前位置:Gxlcms > html代码 > Css不常用属性的使用_html/css_WEB-ITnose

Css不常用属性的使用_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:53人阅读

1.裁剪clip属性-删除其他区域变为透明

css

clip属性

必须将position的值设为absolute或者fixed,此属性方可使用。

显示效果:

我们的裁剪值顺序是上右下左,那么实现的裁剪就是

上:0-10px (纵坐标)

右:200px-190px(横坐标)

下:200px-190px(纵坐标)

左:0-10px(横坐标)

最后就是我们看见的绿色区域,说明上使用此属性必须是有absolute或者fixed的设置。

针对ie6 7的兼容写法:

*clip:rect(10px,190px,190px,10px);

用逗号分隔。

2.圆角border-radius属性-水平垂直分别定义

css

圆角border-radius属性

复合属性,可以同时对4个定义,也可以分开处理。

效果:

我们每个角用一个值代表水平和垂直半径相同,我们可以对一个角定义不同的水平垂直半径。写法是在值之间/分开:

css

圆角border-radius属性

效果:

3.背景裁剪background-clip属性-字体以外被裁剪

css

背景裁剪background-clip属性

我是字体

效果:

这个属性在谷歌有效,需要写前缀,我们发现除了字体,绿色背景全被裁剪了,

我们如果把字体设置为透明,背景改为渐变色,我们就做出渐变字体了。

4.字体颜色color 属性-字体颜色设置为透明看见背景色

css

字体颜色color属性

我是字体

效果:

5.边框border属性-设置为透明实现三角形

css

边框border属性-设置为透明实现三角形

三角

效果:

我们把宽高设置为0;然后对边框的颜色右,下设置为透明,这样就出现的如图的黑色三角形,还可以其他设置方式。

总结一次,针对颜色设置为透明,可以实现很多的小效果!

6.文字空隙letter-spacing属性和单词空隙word-spacing属性

css

文字空隙letter-spacing属性和单词空隙word-spacing属性

我是你

我是你

i love you

i love you

效果:

对比非常明显!

7.white-space属性-实现文字强制不换行

css

white-space属性-实现文字强制不换行

white-space属性-实现文字强制不换行

效果:

height:200px; line-height:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

这些可以为这个效果实现都要写的属性。

7.content属性-实现内容插入

css

content属性-实现内容插入

效果:

这个属性一般结合::beforeh和::after为对象处理,插入了内容和定义样式。

我们在预设清除浮动也利用了为对象的处理,在最后插入内容去clear。

8.writing-mode属性-实现文字排版方式

css

writing-mode属性-实现文字排版方式

我是很好的,非常的开心

效果:

垂直排列,右侧起始。

css

writing-mode属性-实现文字排版方式

我是很好的,非常的开心

效果:

垂直左侧起始,默认水平不做演示。

人气教程排行