好程序员web前端分享CSS3文本属性-阿里云开发者社区

开发者社区> 开发与运维> 正文

好程序员web前端分享CSS3文本属性

简介: 浏览器前缀的简介及应用好程序员web前端分享css3文本属性,某些CSS属性还只是最新版的预览版,并未发布成最终的正式版,而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器专有的;有些时候,有些浏览器为了扩展某方面的功能,它们会选择新增的一些CSS属性,这些自行扩展的CSS属性也是浏览器专属的。

浏览器前缀的简介及应用
好程序员web前端分享css3文本属性,某些CSS属性还只是最新版的预览版,并未发布成最终的正式版,而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器专有的;有些时候,有些浏览器为了扩展某方面的功能,它们会选择新增的一些CSS属性,这些自行扩展的CSS属性也是浏览器专属的。为了让这些浏览器识别这些专属属性,CSS规范允许在CSS属性前增加各自的浏览器前缀。

_1

文本阴影属性语法及应用

_2

说明:水平、垂直阴影的位置允许负值 可进行多阴影设置
文本换行的相关属性
Word-wrap
属性值:
normal
说明:只在允许的断字点换行(浏览器保持默认处理)
break-word
说明:属性允许长单词或 URL 地址换行到下一行。
属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
Word-break
属性值:
break-all
说明:它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句
Keep-all
说明:文本不会换行,只能在半角空格或连字符处换行。
@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在IE4就支持)
@font-face的语法规则:@font-face {
font-family: ; 
src: ]*; 
[font-weight: ]; 
[font-style:

Percentage(%)
以百分比为值设置背景图大小

cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域

contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
4、css3多背景属性
Eg:p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景,第一个最上面 
background-color:yellow; //这是定义的默认背景颜色,全部适合 }
CSS3 颜色特性
1、rgba 颜色模式
2、 Hsl 颜色模式(了解)
3、 Hsla 颜色模式(了解)
CSS3 边框的新增属性
1、border-color
EG:border-color:red green #000 yellow;(上右下左)
2、border-image
border-image 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-outset 边框图像区域超出边框的量
3、Border-radius 圆角边框
(1).box{     border-radius: 5px 10px 20px 50px          }

_3

(2).div1{border-radius: 2em/1em}

_4

以斜杠/分开后面的参数:
第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径
(3).div1{         border-radius:10px 20px 30px 40px/40px 30px 20px 10px }

_5

按顺时针的顺序,斜杠/左边是四个圆角的水平半径,右边是四个圆角的垂直半径,但是通常我们很少写右边的参数,那就是默认右边等于左边的值。
4、box-shadow 盒子阴影
属性值:

_6

Eg:box-shadow: 10px 10px 5px #888888

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章