CSS3常见属性（上篇）

一、CSS3边框

1、border-radius（圆角）

div{  
 border:2px solid;
 border-radius:25px;
}

2、box-shadow（阴影）

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

div{
 box-shadow: 10px 10px 5px #888888;
}

3、border-image（边界图片）

border-image: source slice width outset repeat|initial|inherit;

div{
 border-image:url(border.png) 30 30 round;
}

border-image-source用于指定要用于绘制边框的图像的位置
border-image-slice图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset用于指定在边框外部绘制 border-image-area 的量
border-image-repeat用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

二、CSS3圆角

border-radius - 指定每个圆角.

扫描二维码关注公众号，回复： 11575916 查看本文章

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。border-radius: 15px 50px 30px 5px:
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。border-radius: 15px 50px 30px:
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。border-radius: 15px 50px:
一个值：四个圆角值相同。

三、CSS3背景

1、background-image（添加背景图片）

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2、background-size（指定背景图像的大小）

background-size: length|percentage|cover|contain;

length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

3、background-origin（指定了背景图像的位置区域）

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

padding-box:背景图像填充框的相对位置
border-box:背景图像边界框的相对位置
content-box:背景图像的相对位置的内容框

4、background-clip（从指定位置开始绘制）

background-clip: border-box|padding-box|content-box;

border-box : 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box:背景绘制在衬距方框内（剪切成衬距方框）。
content-box : 背景绘制在内容方框内（剪切成内容方框）。

5、 background-repeat 属性

repeat背景图像将向垂直和水平方向重复。这是默认
repeat-x只有水平位置会重复背景图像
repeat-y只有垂直位置会重复背景图像
no-repeatbackground-image不会重复
inherit指定background-repea属性设置应该从父元素继承

四、CSS3渐变

1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从左到右

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 - 对角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用多个颜色结点

#grad {
  background-image: linear-gradient(red, yellow, green);
}

使用透明度

rgba() 函数来定义颜色结点。
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复的线性渐变repeating-linear-gradient() 函数用于重复线性渐变

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

2、径向渐变（Radial Gradients）- 由它们的中心定义

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）

#grad {
  background-image: radial-gradient(red, yellow, green);
}

径向渐变 - 颜色结点不均匀分布

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

size 参数定义了渐变的大小。它可以是以下四个值

closest-side、farthest-side、closest-corner、farthest-corner

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

五、CSS3文本效果

1、text-shadow（文本阴影）
指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

h1{
   text-shadow: 5px 5px 5px #FF0000;
}

2、box-shadow（盒子阴影）

div {
    box-shadow: 10px 10px 5px #888888;
}

也可以在 ::before 和 ::after 两个伪元素中添加阴影效果。

3、text-overflow（文本溢出属性指定应向用户如何显示溢出内容）

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
} 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

4、word-wrap（换行）

p {word-wrap:break-word;}

normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

5、word-break（单词拆分换行）

p.test1 {
    word-break: keep-all;
} 
p.test2 {
    word-break: break-all;
}

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

6、文本其他属性

hanging-punctuation 规定标点字符是否位于线框之外。
（目前浏览器都不支持）

hanging-punctuation: none|first|last|allow-end|force-end;

punctuation-trim 规定是否对标点字符进行修剪。
（任何浏览器都不支持）

punctuation-trim: none|start|end|allow-end|adjacent;

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
（目前浏览器都不支持）

text-emphasis: text-emphasis-style text-emphasis-color;

text-justify 规定当 text-align 设置为"justify" 时所使用的对齐方法。
（只有IE5.5支持）

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

text-outline 规定文本的轮廓。
（目前浏览器都不支持）

text-outline: thickness blur color;

六、CSS3字体

使用需要的字体

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
} 
div{
    font-family:myFirstFont;
}
</style>

font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch 可选。定义如何拉伸字体。默认是 “normal”。值包含有（ Normal、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded ）
font-style 可选。定义字体的样式。默认是 “normal”。值包含有（Normal、italic、oblique）
font-weight

七、CSS3 2D 3D转换

1、transform 适用2D或 3D转换的元素

transform: none|transform-functions;

在这里插入图片描述

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数.
skew() 方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

2、transform-origin允许您更改转化元素位置

transform-origin: x-axis y-axis z-axis;

x-axis(left、center、right、length、%）
y-axis（top、center、bottom、length、%）
z-axis（length）

CSS3常见属性（上篇）

猜你喜欢