CSS3(一)新增常用样式

最新推荐文章于 2023-01-06 23:50:25 发布

灵熙兔

最新推荐文章于 2023-01-06 23:50:25 发布

阅读量2.5k

点赞数 1

分类专栏：【HTML5+CSS3】文章标签： css3

本文链接：https://blog.csdn.net/qq_25178609/article/details/52577239

版权

【HTML5+CSS3】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
优点：CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的

这里写图片描述
一、边框
1、圆角效果 border-radius
使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

例子1：实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

例子2：实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

例子3：实心左半圆：把宽度（width）设为高度(height)值的一半（也就是长方形），并且左上，左下圆角值都设置宽度值。

div.semi-circle{ 
    height:100px;
    width:50px;
    background:#9da;
    border-radius:50px 0 0 50px;
    }

2、阴影 box-shadow
box-shadow是向盒子添加阴影。支持添加一个或者多个。
语法：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
这里写图片描述
例子1：外阴影：

.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}

例子2：内阴影：

.box_shadow{
  box-shadow:4px 2px 6px #333333 inset; 
}inset

阴影模糊半径与阴影扩展半径的区别：

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

X轴偏移量和Y轴偏移量值可以设置为负数，表现为向左（向上）阴影

3、边框应用图片 border-image
border-image有六大属性值，分别是：图片地址border-image-source、图片切片border-image-slice、图片宽度border-image-width、图片外凸border-image-outset、图片重复border-image-repeat
例如：
这里写图片描述

background:url(xx.jpg) 10px 20px no-repeat; //对比背景图片

border-image-slice：指定边框图像顶部、右侧、底部、左侧内偏移量。没有具体的单位值，比如像px、em统统不能应用，只要给一个单纯的数字即可，当然了你也可以按照百分比来设置。作用就是把边框图像切成9个区域：4个角、4边区域和一个中间部位，前辈们都谦虚称作9宫格，但是，假如说不应用fill这个可选属性值的话，那么中间第九块格子被当做透明不见
这里写图片描述
border-image-width，作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由我来做主，假如不指定，那么图片边框宽度就由盒子的边框宽度来固定。可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度
border-image-outset，作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离

这里写图片描述
把上图当作边框图片来应用一下，看一看是什么效果:

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

效果：
这里写图片描述
从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。

repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：
这里写图片描述
边角部分为裁掉了，但是round参数可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；border-image:url(borderimg.png) 70 round;

相反的stretch 很好理解就是拉伸，有多长拉多长。border-image:url(borderimg.png) 70 stretch
这里写图片描述
注意：Chrome下5是存在的，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

二、颜色
1、颜色之RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：

color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

代码示例：

background-color:rgba(100,120,60,0.5);

2、background-image的渐变色彩 gradient
Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
这里写图片描述
参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

这里写图片描述

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

三、文字与字体
1、文字溢出时text-overflow 与 word-wrap
text-overflow ：用来设置是否使用一个省略标记（…）标示对象内文本的溢出。但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

这里写图片描述
word-wrap ：也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

2.嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

比如：

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

3.文本阴影text-shadow
语法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。

四、背景相关
1.设置元素背景图片的原始起始位置background-origin
语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。注意：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

这里写图片描述

2.将背景图片做适当的裁剪以适应实际需要background-clip

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示相似的效果，只不过是对背景图片的剪裁来确定位置。backgroud-clip默认值为border-box。
这里写图片描述

3.背景图片的大小background-size
以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background-size: auto | <长度值> | <百分比> | cover | contain

auto：默认值，不改变背景图片的原始高度和宽度；
<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4.多重背景multiple backgrounds

background-image:url(http://img.mukewang.com/54cf2365000140e600740095.jpg),url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

五、用户界面
1、自由缩放属性resize——常用于文本域textarea
它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。
语法：
resize: none | both | horizontal | vertical | inherit

none——用户不能拖动元素修改尺寸大小。
both——用户可以拖动元素，同时修改元素的宽度和高度
horizontal——用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical——用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit——继承父元素的resize属性值。

实例：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  resize: horizontal;
}

2.CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。
语法：

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

outline: red solid 2px;

从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个outline-offset属性

outline-offset：
定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。