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

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

CSS3

1、 不同的浏览器需要不同的前缀(浏览器的私有属性)

前缀 浏览器

-webkit chrome/safair

-moz firefox

-ms IE

-o opera

2、新特性

  1. 1):CSS选择器
  2. 2):新的颜色制式和透明设定
  3. 3):多栏布局的实现
  4. 4):多背景图效果
  5. 5):文字阴影
  6. 6):开放的网络字体类型
  7. 7):圆角
  8. 8):边框背景图片
  9. 9):盒子阴影
  10. 10):媒体查询

3、新属性

(1)text-overflow设定文本溢出

Text-flow:clip;———默认,溢出的文本不显示省略号

Text-flow:ellipis——-溢出的文本显示省略号

注:

和overflow:hidden;(超出处理,文本进行隐藏)

white-space:nowrap(禁止换行)配合使用

例子:

Css.css:

.main{

  1. width:300px;

height:200px;

background-color:RGBA(255,0,0,0.5);

}

p{

  1. text-overflow:ellipis;
  2. overflow:hidden;
  3. white-space:nowrap;
  4. \}

Index.html:



请检查该地址是否输入错误,比如将”www.example.com”错写成”ww.example.com”。如果您无法载入任何页面,请检查您计算机的网络连接。如果您的计算机或网络受到防火墙或者代理服务器的保护,请确认 Firefox 已被授权访问网络。



同时,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{

  1. background-color:\#CC6;
  2. width:400px;
  3. height:300px;
  4. opacity:0.5;
  5. filter:alpha(opacity=50);
  6. \}

(3)text-fill-color—文本填充颜色———使用该属性加浏览器私有前缀(火狐、IE不支持)

(4)text-stroke—-文本边框颜色——使用该属性加浏览器私有前缀(火狐、IE不支持)

Text-stroke-width:10px;——文本描边的厚度

Text-stroke-color:red;——-文本描边颜色

以上两种简写:text-stroke:宽度颜色;

例子1:(3)(4)结合:

.titile1{

  1. font-size:80px;
  2. font-weight:bold;
  3. text-align:center;
  4. width:500px;
  5. height:200px;
  6. color:rgb(255,0,0);
  7. background-color:hsla(45,100%,40%,0.2);
  8. -webkit-text-fill-color:yellow;
  9. -webkit-text-fill-color:blue;
  10. -moz-text-fill-color:blue;
  11. -ms-text-fill-color:blue;
  12. -o-text-fill-color:blue;
  13. -webkit-text-stroke-width:2px;
  14. -moz-text-stroke-width:2px;
  15. -ms-text-stroke-width:2px;
  16. -o-text-stroke-width:2px;
  17. \}

例子2:实现镂空字:(文本填充背景为透明即可)

.title{

  1. font-size:80px;
  2. font-weight:bold;
  3. text-align:center;
  4. width:500px;
  5. height:200px;
  6. color:rgb(255,0,0);
  7. background-color:hsla(45,100%,40%,0.2);
  8. -webkit-text-fill-color:transparent;
  9. -webkit-text-fill-color:transparent;
  10. -moz-text-fill-color:transparent;
  11. -ms-text-fill-color:transparent;
  12. -o-text-fill-color:transparent;
  13. -webkit-text-stroke-width:2px;
  14. -moz-text-stroke-width:2px;
  15. -ms-text-stroke-width:2px;
  16. -o-text-stroke-width:2px;
  17. \}

(5)border-radius—-圆角(四个角分别为:左上、右上、右下、左下)顺时针

一个值时:Barder-radius:10px;——四个角都为10px;

三个值时:border-radius:10px 5px 1px;—-

  1. 第一个值:为左上
  2. 第二个值:右上和左下
  3. 第三个值:右下

两个值时:border-radius:10px 5px;

  1. 第一个值:左上、右下
  2. 第二个值:右上、左下(对角)

例子:做圆:(即圆角各位圆直径的一半)

.title1{

  1. width:200px;
  2. height:200px;
  3. background-color:red;
  4. border-radius:100px;
  5. \}

单独对四个角进行设置:

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{

  1. width:300px;
  2. height:200px;
  3. background:red;
  4. /\*谷歌\*/
  5. -webkit-border-top-right-radius:200px150px;
  6. -webkit-border-top-left-radius:200px150px;
  7. -webkit-border-bottom-right-radius:200px150px;
  8. -webkit-border-bottom-left-radius:200px150px;
  9. \}

发表评论

表情:
评论列表 (有 0 条评论,62人围观)

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

相关阅读