HTML5+CSS3-第二节(浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角)
来源:互联网 发布:知乎武汉船用机械 编辑:程序博客网 时间:2024/05/19 22:25
CSS3
1、 不同的浏览器需要不同的前缀(浏览器的私有属性)
前缀 浏览器
-webkit chrome/safair
-moz firefox
-ms IE
-o opera
2、新特性
(1):CSS选择器
(2):新的颜色制式和透明设定
(3):多栏布局的实现
(4):多背景图效果
(5):文字阴影
(6):开放的网络字体类型
(7):圆角
(8):边框背景图片
(9):盒子阴影
(10):媒体查询
3、新属性
(1)text-overflow设定文本溢出
Text-flow:clip;------默认,溢出的文本不显示省略号
Text-flow:ellipis-----溢出的文本显示省略号
注:
和overflow:hidden;(超出处理,文本进行隐藏)
white-space:nowrap(禁止换行)配合使用
例子:
Css.css:
.main{
width:300px;
height:200px;
background-color:RGBA(255,0,0,0.5);
}
p{
text-overflow:ellipis;
overflow:hidden;
white-space:nowrap;
}
Index.html:
<div class="main">
<p>请检查该地址是否输入错误,比如将"www.example.com"错写成"ww.example.com"。如果您无法载入任何页面,请检查您计算机的网络连接。如果您的计算机或网络受到防火墙或者代理服务器的保护,请确认 Firefox 已被授权访问网络。</p>
</div>
同时,word-wrap设置文本行为
(2)新的颜色制式和透明设定
一、CSS1&CSS2的颜色方式:
1、 color:name;颜色名称方式
2、 HEX方式:十六进制方式(#号方式)范围是00-ff
3、 RGB格式:三原色配色方式(数字(0-255)或百分比(0%-100%))
CSS3新增颜色表示方法:
1、 RGBA模式—新增透明度
语法:rgba(R,G,B,A)
R:红色值
G:绿色值
B:蓝色值
A:alpha透明度,取值(0-1之间)
例子:
background-color:RGBA(255,0,0,0.5);
2、 HSL模式—色轮模式
语法:HSL(H,S,L);
H:色调(0-360之间)0/360-红色 120绿色 240 蓝色
S:饱和度(0-100%)
L:亮度(0%-100%之间)0%为黑色 100%为白色
3、 HSLA模式---新增透明度
语法:HSLA(H,S,L,A);
H:色调(0-360之间)0/360-红色 120绿色 240 蓝色
S:饱和度(0-100%)
L:亮度(0%-100%之间)0%为黑色 100%为白色
A:透明度(取值0-1之间)
二、透明设定:
1、transparent
例子:
Background-color:transparent
2、rgba(0,0,0,0)-------只要透明度设为0,则为白色
3、opacity-透明(取值0-1之间)
注意:不支持IE,若要兼容IE,加:filter:alpha(opacity=50); 此方法仅限IE
例子:
CSS.CSS:
div{
background-color:#CC6;
width:400px;
height:300px;
opacity:0.5;
filter:alpha(opacity=50);
}
(3)text-fill-color—文本填充颜色------使用该属性加浏览器私有前缀(火狐、IE不支持)
(4)text-stroke---文本边框颜色----使用该属性加浏览器私有前缀(火狐、IE不支持)
Text-stroke-width:10px;----文本描边的厚度
Text-stroke-color:red;-----文本描边颜色
以上两种简写:text-stroke:宽度颜色;
例子1:(3)(4)结合:
.titile1{
font-size:80px;
font-weight:bold;
text-align:center;
width:500px;
height:200px;
color:rgb(255,0,0);
background-color:hsla(45,100%,40%,0.2);
-webkit-text-fill-color:yellow;
-webkit-text-fill-color:blue;
-moz-text-fill-color:blue;
-ms-text-fill-color:blue;
-o-text-fill-color:blue;
-webkit-text-stroke-width:2px;
-moz-text-stroke-width:2px;
-ms-text-stroke-width:2px;
-o-text-stroke-width:2px;
}
例子2:实现镂空字:(文本填充背景为透明即可)
.title{
font-size:80px;
font-weight:bold;
text-align:center;
width:500px;
height:200px;
color:rgb(255,0,0);
background-color:hsla(45,100%,40%,0.2);
-webkit-text-fill-color:transparent;
-webkit-text-fill-color:transparent;
-moz-text-fill-color:transparent;
-ms-text-fill-color:transparent;
-o-text-fill-color:transparent;
-webkit-text-stroke-width:2px;
-moz-text-stroke-width:2px;
-ms-text-stroke-width:2px;
-o-text-stroke-width:2px;
}
(5)border-radius---圆角(四个角分别为:左上、右上、右下、左下)顺时针
一个值时:Barder-radius:10px;----四个角都为10px;
三个值时:border-radius:10px 5px 1px;---
第一个值:为左上
第二个值:右上和左下
第三个值:右下
两个值时:border-radius:10px 5px;
第一个值:左上、右下
第二个值:右上、左下(对角)
例子:做圆:(即圆角各位圆直径的一半)
.title1{
width:200px;
height:200px;
background-color:red;
border-radius:100px;
}
单独对四个角进行设置:
1、 text-top-left-radius:5px 10px;----设置左上角边框
也可以写成:text-top-left-radius:5px/10px;
2、 text-top-right-radius:5px 10px;----设置右上角边框
也可以写成:text-top- right-radius:5px /10px;
3、 text-bottom-left-radius:5px 10px;----设置左下角边框
也可以写成:text- bottom -left-radius:5px/10px;
4、 text-bottom-left-radius:5px 10px;----设置左下角边框
也可以写成:text-bottom-left-radius:5px /10px;
注释:5px—--水平圆角半径 10px—垂直圆角半径(不为负数)
例子:
Css.css
.div1{
width:300px;
height:200px;
background:red;
/*谷歌*/
-webkit-border-top-right-radius:200px150px;
-webkit-border-top-left-radius:200px150px;
-webkit-border-bottom-right-radius:200px150px;
-webkit-border-bottom-left-radius:200px150px;
}
- HTML5+CSS3-第二节(浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角)
- Css3文本新属性
- 动态设定文本样式
- HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)
- 关于如何设定css样式使得文本溢出部分用省略号代替
- CSS3文本溢出
- CSS3文本溢出
- 使用js设定文本格式
- 【HTML5】文本溢出
- svg文本。填充和边框
- css3新特性1——文本效果&边框&背景&多列
- CSS文本溢出省略号
- css省略溢出文本
- CSS--文本溢出处理
- 可改变颜色的文本,可实现透明文本
- 可改变颜色的文本,可实现透明文本
- CSS3 选择器、颜色与度量单位、文本、边框、背景
- CSS/CSS3 文本
- HTML5+CSS3-第一节(文档类型声明、新增标签)
- CF_602A - Two Bases(进制转换—水题)
- android.support.v7.widget.SearchView开发记录(一)
- 练习三 Problem T
- 在Android应用中使用自定义证书的HTTPS连接(下)
- HTML5+CSS3-第二节(浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角)
- peda的帮助文档(自己翻译)
- Guice 注入--(privateModule,intall(),expose())
- OC视频教程29课-第01讲 Classes
- hdu1151(二分图最大独立集)
- android-----Volley框架使用ImageLoader加载图片源码分析
- HDU 4568 Hunter
- 工资数组类
- PyQt基础第4篇——导入图片资源