关闭

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

868人阅读 评论(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、新属性

1text-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之间)

 

二、透明设定:

1transparent

例子:

Background-color:transparent

 

2rgba(0,0,0,0)-------只要透明度设为0,则为白色

3opacity-透明(取值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);

         }

 

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

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

         }

 

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

         }

 

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS框模型

前端知识包括html、css等多数整理自W3School手册! CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述 ...
  • qq_26282959
  • qq_26282959
  • 2016-07-26 14:05
  • 609

css背景色不填充边框,css的写法?

background-clip: padding-box;即可 支持度:IE9+background-clip的值 padding-box: 从padding区域(不含padding)开始向外裁剪背...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017-07-15 17:26
  • 291

取消Chrome表单文本框自动填充黄色背景色样式

开发后台管理系统或网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色。这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问题,把之前查阅的一些资料和自己解决这个问...
  • zwk199024
  • zwk199024
  • 2015-03-20 00:01
  • 5637

SVG图标颜色文字般继承与填充

转自:http://www.zhangxinxu.com/wordpress/?p=4286 一、接上篇 前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG ...
  • auragreen
  • auragreen
  • 2016-08-15 16:32
  • 3627

HTML5 Canvas渐进填充与透明

详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用, 结合渐进填充与透明度支持,实现图像的Mask效果。演示水平颜色渐进,垂直颜色渐变 等颜色渐变填充方法。
  • jia20003
  • jia20003
  • 2013-07-05 14:35
  • 19662

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

(6)text-align-----文本对齐方式 A、text-align :Left;左对齐 B、text-align :right;右对齐 C、text-align :center;居中 D、te...
  • u012054869
  • u012054869
  • 2016-05-31 20:19
  • 668

HTML5 CSS3实现圆角样式,兼容所有浏览器(一)

我承认我有点标题党了,IE6由于没有测试机器,所以不知道兼容与否,有同学有IE6的帮忙测试下。后期会陆续放出一些常用的部分圆角,先看button和一个类似panel的容器。具体实现:先看效果样式基本上...
  • ronnie201314
  • ronnie201314
  • 2011-03-16 16:56
  • 5884

JQUERY CSS3 文本圆角 光晕效果

  • 2010-11-03 17:37
  • 27KB
  • 下载

画图程序最新版 MFC/VC/VC++ 很多功能哦(画点,直线,矩形,椭圆,圆,正方形,自由线,添加文本,undo,redo,删除,可以设置 线形,线宽,线的颜色,填充色,字体)

  • 2009-02-02 11:01
  • 29KB
  • 下载

css3新特性1——文本效果&边框&背景&多列

什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都...
  • cysear
  • cysear
  • 2015-08-06 14:30
  • 662
    个人资料
    • 访问:82515次
    • 积分:1739
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条