CSS3新特性_repeating-linear-gradient 3d边框-CSDN博客

边框

border-radius
box-shadow
border-image

圆角——border-radius

使用一个半径确定圆形半角，使用两个半径确定椭圆半角
即使元素没有边框，圆角也可以应用到background上

border-radius:<length>|<percentage>
/*使用方法*/
border-radius:<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
length
定义圆形半径或椭圆的半长轴，半短轴
percentage
定义相对于盒模型的半径或轴
栗子

border-radius: 30px;   //四个角都是30px
border-radius: 25% 10%;  //左上和右下是25%，右上和左下是10%
border-radius: 10%(左上) 30%(右上) 50%(右下) 70%(左下);
border-radius: 10% / 50%;  //椭圆，四个角都是10% 50%
border-radius: 10px 100px / 120px;  
/*相当于*/
border-top-left-radius:     10px 120px;
border-top-right-radius:    100px 120px;
border-bottom-right-radius: 10px 120px;
border-bottom-left-radius:  100px 120px;

border-radius: 50% 20% / 10% 40%;
/*相当于*/
border-top-left-radius:     50% 10%;
border-top-right-radius:    20% 40%;
border-bottom-right-radius: 50% 10%;
border-bottom-left-radius:  20% 40%;

盒阴影——box-shadow

box-shadow:inset?&&<x轴偏移量> <y轴偏移量> [<模糊半径>|<阴影半径>|<color>]

inset
默认阴影在边框外，inset使阴影在边框内
x,y轴偏移量
正值阴影位于左和下边，负值阴影位于右和上边
模糊半径
表示边缘模糊程度，不能为负，默认为0
阴影半径
表示阴影的大小，正值阴影扩大，负值阴影缩小

可以设置多个阴影，使用逗号隔开
栗子

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red, -1em 0 .4em olive;

边界图片——border-image

border-image CSS属性允许在元素的边框上绘制图像。
使用时会替换border-style的属性
它是五个属性的简写属性
- border-image-source: none
- border-image-slice: 100%
- border-image-width: 1
- border-image-outset: 0
- border-image-repeat: stretch

/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

/*位图*/
#bitmap { 
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

/*渐变*/
#gradient { 
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

背景

background-image
background-size
background-origin
background-clip

背景图片——background-image

该属性可以设置多个图像，先指定的图像会在上面绘制，元素的borders会在背景图片上面绘制，background-color在最下面绘制
栗子

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

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

background-size

指定背景图像的大小，百分比是相对于父元素的宽高的大小

/* 关键字 */
background-size: cover  //完全覆盖背景
background-size: contain  //图片完全装入背景区

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

background-origin

指定背景图像的位置区域

当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

background-origin: border-box
background-origin: padding-box //默认
background-origin: content-box

background-clip

设置元素的背景延伸到哪里

background-clip: border-box   //边框外沿
background-clip: padding-box  //内边距外沿
background-clip: content-box  //内容区外沿

渐变

线性渐变

线性渐变示意图
语法

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

利用repeating-linear-gradient 可以实现重复渐变效果

值

side or corner

描述渐变线起始点位置，包含两个关键词，第一指出垂直位置left/right，第二个指出水平位置top/bottom

angle

用角度指定渐变的方向，顺时针增加

栗子

/*从上到下，兼容不同浏览器的语法，当使用带前缀的规则时，不要加“to”关键字。*/
.grad { 
  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
}

/*从左到右*/
#grad{
    background:linear-gradient(to right,red,blue); //
}

/*从左上到右下*/
#grad{
    background:linear-gradient(to bottom right,red,blue);
}

使用角度
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

#grad{
    background:linear-gradient(180deg,red,blue);
}
/*可以使用多个颜色节点*/
#grad{
    background:linear-gradient(green,red,blue);
}
/*从60%的梯度线开始的渐变*/
div {
  background: linear-gradient(135deg, red, red 60%, blue);
}

径向渐变

径向渐变示意图
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  and <color-stop>     = <color> [ <percentage> | <length> ]?

position
top,left,right,bottom,center
shape
circle,ellipse
size

常量	描述
closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

栗子

background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

文本效果

text-shadow
box-shadow
text-overflow
word-wrap
word-break

text-overflow

ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。

栗子

text-overflow: clip;    //截断
text-overflow: ellipsis;  //省略号
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

word-wrap

针对太长的单词，强制换行

p {word-wrap:normal | break-all | keep-all | break-word;}

字体

@font-face

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

通过增加其他属性来设置不同样式的字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

2D转换

使用transform属性，结合不同的方法实现转换效果

transform属性，只对块级元素生效

translate(tx[, ty]) —— 平移
translateX(angle)，translateY(angle)
rotate(angle) —— 旋转
scale(sx[, sy]) —— 缩放
如果sy未指定，默认认为和sx的值相同，scaleX，scaleY
skew(ax[, ay]) —— 倾斜
元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供，在Y轴上没有倾斜。skewX，skewY
matrix(a,b,c,d,tx,ty) —— 矩阵
┌ — ┐
│ a b │
│ c d │
└ — ┘
tx, ty是变形的值 .

栗子

   -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
    -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
        transform: matrix(1, -0.2, 0, 1, 0, 0);
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(120px, 50%);
transform: rotate(0.5turn);

3D转换

rotateX(angle)
围绕X轴按照给定角度旋转

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY(angle)
围绕Y轴按照给定角度旋转

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

过渡动画

Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
语法

/*属性和持续时间一定要有*/
transition: transition-property transition-duration[transition-timing-function|transition-delay]
/* 应用于一个属性*/
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* 应用于两个属性 */
transition: margin-right 4s, color 1s;

/* 应用于所有属性 */
transition: all 0.5s ease-out;

动画

CSS animation属性是如下属性的一个简写属性形式: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.
语法

/*必须指定keyframes选择器和动画持续时间*/
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
/*from和to等同于0%和100%*/
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
/*也可以使用百分数定义多段动画*/ 
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;

animation-timing-function
定义动画的速度曲线

/* Keyword values */
animation-timing-function: ease; //默认。动画以低速开始，然后加快，在结束前变慢。
animation-timing-function: ease-in; //动画以低速开始。
animation-timing-function: ease-out; //动画以低速结束。
animation-timing-function: ease-in-out; //动画以低速开始和结束。
animation-timing-function: linear;  //动画从头到尾的速度是相同的。
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

appearance(不重要)

appearance 属性允许您使元素看上去像标准的用户界面元素
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}

值	说明
normal	正常呈现元素
icon	作为一个小图片的呈现元素
window	作为一个视口呈现元素
button	作为一个按钮，呈现元素
menu	作为一个用户选项设定呈现元素选择
field	作为一个输入字段呈现元素

多列

column-count：指定需要分割的列数
column-gap：列与列额的间隙
column-rule-style：列与列间的边框样式
column-rule-width：边框厚度
column-rule-color：边框颜色
column-rule：是以上三个属性简写
column-span：指定元素跨多少列
column-width：指定列的宽度

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: lightblue;
    column-rule: 1px solid lightblue;
    column-width: 100px;
}
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

用户界面

resize
resize属性指定一个元素是否应该由用户去调整大小。

/* 适用于 Firefox 4+, Chrome, 和 Safari中*/
resize: none; //不允许缩放
resize: both; //允许水平和垂直方向缩放
resize: horizontal; //水平方向
resize: vertical; //垂直方向
resize: block;
resize: inline;

box-sizing
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

box-sizing: content-box;//默认，width为内容区的宽度
box-sizing: border-box;//width包含边框和内边距

outline-offset
outline-offset CSS 属性用于设置 outline 与一个元素边缘或边框之间的间隙。

outline-offset: 3px;
outline-offset: 0.2em;

按钮

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

多媒体查询

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。

多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

/*如果文档宽度小于300像素则修改背景颜色*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}