1.css边框
圆角
border-radius #创建圆角
语法:
1 border-radius: 1-4 length|% / 1-4 length|%;#length:定义弯道形状 %:使用%定义角落的形状
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
1 | div |
盒阴影
box-shadow #创建阴影
语法:
1 box-shadow: *h-shadow v-shadow blur spread color* inset;#h-shadow:必需的。水平阴影的位置。允许负值
#v-shadow:必需的。垂直阴影的位置。允许负值
#blur:可选。模糊距离
#spread:可选。阴影的大小
#color:可选。阴影的颜色。
#inset:可选。从外层的阴影(开始时)改变阴影内侧阴影
1 | div |
边界图片
border-image #允许制定一个图片作为边框
语法:
1 border-image: source slice width outset repeat|initial|inherit;#source:用于指定要用于绘制边框的图像的位置
#slice:图像边界向内偏移
#width:图像边界的宽度
#outset:用于指定在边框外部绘制 border-image-area 的量
#repeat:用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。
1 | div |
2.css背景
background-image
通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
1 | #example1 { |
后者写成如下格式
1 | #example1 { |
background-size
background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
语法:
1 background-size: length|percentage|cover|contain;#length : 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) #percentage : 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为”auto(自动)” #cover : 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 #contain : 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
1 | div |
或者例如
1 | div |
background-origin
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
语法:
1 background-origin: padding-box|border-box|content-box;padding-box : 背景图像填充框的相对位置 border-box : 背景图像边界框的相对位置 content-box : 背景图像的相对位置的内容框
1 | div |
background-clip
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
语法:
1 background-clip: border-box|padding-box|content-box;border-box : 默认值。背景绘制在边框方框内(剪切成边框方框)。 padding-box : 背景绘制在衬距方框内(剪切成衬距方框)。 content-box : 背景绘制在内容方框内(剪切成内容方框)。
1 | #example1 { |
3.css渐变
线性渐变(Linear Gradients)
为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)默认情况下是从上到下渐变
语法:
1 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);dircetion包含有(to bottom、to top、to right、to left、to bottom right,等等)
1 | #grad { background-image: linear-gradient(#e66465, #9198e5); } |
使用角度
语法:
1 background-image: linear-gradient(angle, color-stop1, color-stop2);角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
但是,请注意很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 – x = y 其中 x 为标准角度,y为非标准角度。
1 | #grad { background-image: linear-gradient(-90deg, red, yellow); } |
使用多个颜色结点
1 | #grad { background-image: linear-gradient(red, yellow, green); } |
使用透明度
CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
1 | #grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } |
使用重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
1 | #grad { /* 标准的语法 */ |
径向渐变(Radial Gradients)
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。默认情况下均匀分布
语法
1 background-image: radial-gradient(shape size at position, start-color, ..., last-color);
1 | #grad { |
不均匀分布例如下
1 | #grad { |
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
1 | #grad { |
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
1 | #grad1 { |
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
1 | #grad { |
4.css文本效果
text-shadow
CSS3 中,text-shadow属性适用于文本阴影。
指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色
1 | h1 |
box-shadow
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
1 | div { |
使用box-shadow的card效果
1 | div.card { |
完整实例:
1 |
|
text-overflow
CSS3文本溢出属性指定应向用户如何显示溢出内容
1 | p.test1 { |
word-wrap
用于换行,如果某个单词太长,不适合在一个区域内,它扩展到外面:
CSS3中,自动换行属性允许您强制文本换行 – 即使这意味着分裂它中间的一个字
1 | p {word-wrap:break-word;} |
word-break
用于单词拆分换行
1 | p.test1 { |
新文本属性
属性 | 描述 | CSS |
---|---|---|
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
5.css字体
CSS3 @font-face 规则
使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您”自己的”的字体是在 CSS3 @font-face 规则中定义的。
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
1 | <style> |
CSS3 字体描述
下表列出了所有的字体描述和里面的@font-face规则定义:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可选。定义如何拉伸字体。默认是 “normal”。 |
font-style | normal italic oblique | 可选。定义字体的样式。默认是 “normal”。 |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可选。定义字体的粗细。默认是 “normal”。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。 |
6.css2D转化
translate()
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
1 | div |
translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
rotate()
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
1 | div |
rotate值(30deg)元素顺时针旋转30度。
scale()
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
1 | -ms-transform:scale(2,3); /* IE 9 */ |
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
skew()
语法:
1 transform:skew(<angle> [,<angle>]);包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
- skewX(
);表示只在X轴(水平方向)倾斜。 - skewY(
);表示只在Y轴(垂直方向)倾斜。
1 | div |
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
matrix()
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
1 | div |
7.css3D转化
rotateX()
rotateX()方法,围绕其在一个给定度数X轴旋转的元素。
1 | div |
rotateY()
rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。
1 | div |
版权声明:转载请注明出处!
文章说明: 文章如有不足或者纰漏之处,欢迎留言斧正!