Css3

来源：互联网发布：黑龙江网络电视台直播编辑：程序博客网时间：2024/06/09 21:02

CSS 3

一、CSS3新特性

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

二、选择器

1.CSS1&2
①元素选择器

②关系选择器

③伪类选择器

④ 属性选择器

⑤ 伪对象选择器

2.CSS3新增选择器介绍
① 关系选择器

② 结构性伪类选择器

③ UI元素状态伪类选择器

④ 属性选择器

⑤ 伪对象选择器


三、文本样式
1. CSS1&2中的文本属性　

2. CSS3新增的文本属性

a) Text-overflow: clip/ellipsis
Clip：文本溢出时不显示标记(…),而是将溢出文字截掉
Ellipsis：文本溢出时用省略标记(…)代替截掉文本
注意:该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用，否则无法看到效果

b) Word-break:break-all/keep-all/normall
Break-all:单词内强制换行
Keep-all: 只在半角空格或连字符处换行

四、css3样式
1.颜色
透明：opacity：0.5；（取值0-1）
Filter：opacity；（50%）
全透明：color：transparent；
Rgba：（255,255,255,0）；
2.调用字体样式（未安装的）
@font-face{
Font-family :name；
Scr:url (字体来源)；
}

3.分列

P{
   column-count: n ;          分为n列
   column-gap:npx;           列间距
   colum-rule: solid npxcolor;   间隔线
   colum-width:npx;           列宽
}

  columns {
column-width:；
         column-count:；
        }

4.缩放
resize：none    不可拖动
both     水平垂直都可缩放
vertical    垂直可缩放
horizon   水平可缩放
注：与overflow：auto同时使用
5.Box-size
Box-size：border-box 总宽=width+margin
注：内容过大会撑出范围，可用overflow：hidden隐藏
6.响应式图片（图片随页面大小进行缩放）

img{
height/width:auto;
max-height/width:100%; (最大为原图大小，页面放大图片不会变形)
min-width/height: npx ; (最小像素在缩小页面出现滚动条)
}

7.border
①border：outline:none; (去除响应蓝框)
outline-offset：;(外边框的偏移)

② border-radius：一个值四边圆角相同
两个值：左上，右下/左下，右上
三个值：左上/右上，左下/右下
四个值：左上/右上/右下/左下
③ border-img ：url slice width outsetrepeat/round/stretch

④ border-image-repeat: strech/round/initial/inherit/space/repeat

     stretch:默认值平铺图会不完整
     round：平铺且缩放使图片完整
     inherit：从父元素继承

8.列表组

<fieldset>
<legend>列表名</legend>
<p><input></p>
</fieldset>

9.shadow
① box-shadow给对象实现图层阴影效果

语法：
box-shadow:h-shadowv-shadow blur spread color inset
投影方式 : X轴偏移量　Y轴偏移量　阴影模糊半径　阴影扩展半径　阴影颜色内阴影

② 兼容模式

a.先写整体后写各内核：优雅降级
b.先写各内核在写整体：渐进增强

-webkIt-box-shadow
-o-box-shadow
-ms-box-shadow
-moz-box-shadow
Box-shadow

③ text-shadow :h-shadow v-shadow blur color

10.overflow:hidden/scroll/auto
        Auto:默认值自动识别是否需要滚动条
11.background
1)background:
         多张背景图片插入，考虑叠层效果，谁在最上层，先写谁，中间用逗号隔开。

2）background-size:contain/cover/百分百/px
           Contain:适合区域的最大的大小进行缩放
           Cover：平铺的最小大小进行缩放（铺满）
多张背景图同时定义用逗号隔开
3）background-clip/background-origin:背景图片开始的位置
content-box 文本位置
                 Border-box   边框位置
                 Padding-box 填充位置

4）background-attachment：scroll/local/fixed
      区别：scroll：随着页面滚动条滚动而滚动
             Local：随着当前参考元素（文本）滚动而滚动
             Fixed：固定位置

5）渐变色
   ①单条渐变
background:linear-gradient(direction clolor-stop1,…)
direction:to right/to/bottom/to bottom right/精确值：30deg
                 从左到右/从上到下/从左上到右下/30度倾斜渐变
注：兼容性 –o-
           -webkit-
           -moz-
           background

②多条重复渐变
     background:repeating-linear-gradient(direction,color10%,color2 20%,color3 50%)
      整个区域重复两次渐变（渐变一次的区域大小为： 50%-0%=50%）

③径向渐变：
backround：radial-gradient（center，shape size，start-color1，…）
     center：可省略默认渐变色的中心在区域中心位置
也可以百分号的形式定位中心（水平%，垂直%）
     shape：circle/ellipse 圆/椭圆（默认）
     size : closest-side 从距离中心最近的一边开始
farthest-side 从距离中心最远的一边开始
closest-corner 从距离中心最近的角开始
farthest-corner 从距离中心最远的角开始
④径向重复渐变：
background：repeating-radial-gradient

阅读全文

0 0