HTML5+CSS3-浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角

Love The Way You Lie 2022-08-22 15:13 52阅读 0赞

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：

<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;

-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新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关文本属性之装饰文本(CSS、HTML)

相关文本属性之文本颜色(CSS、HTML)

相关 ③HTML+CSS 文本格式化 (颜色、单位、文本样式）

相关技巧：根据背景色自适应文本颜色

相关 CSS文本属性-文本颜色、文本对齐、文本装饰、文本缩进、行间距

相关 html字体颜色反色,HTML5：画布上的反色文本颜色

相关 HTML5+CSS3-文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩

相关 HTML5+CSS3-浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角

相关 CSS3 选择器、颜色与度量单位、文本、边框、背景

相关 css_文本溢出