CSS3 _border && Transition

Border-radius

Fillet is to do the Web page forever around the topic, before the basic is done through the background picture, with the CSS3 after the property can be done, we can border-radius set the radius of the fillet of the element.

border-radius: 5px;

For a square, we only need to set it to half the length of the edge to render a circle.

div {    width: 200px;    height: 200px; border-radius: 50%; // 设置百分比 border-radius: 100px; // 设置长度一半}

border-radiusis the abbreviation of the format, in fact border-radius border , the same as the attributes, you can also separate the corners separately, that is, the following four ways of writing

length, length;border-top-right-radius: length, length;border-bottom-left-radius: length, length;border-bottom-right-radius: length, length;

The first value is the fillet horizontal radius, the second value is the vertical radius, if the second value is omitted, then it is equal to the first value, then this angle is a one-fourth fillet, if any of the values is 0, then this angle is not a fillet

Box-shadow

CSS3 native support for shadow effects

spread-radius color

box-shadowProperties have up to 6 parameter settings:

1. Shadow type: This parameter is an optional value, and if no value is set, its default projection is an outer shadow, and if its unique value is inset, the outer shadow becomes an inner shadow

2. H-shadow: Refers to the shadow horizontal offset whose value can be positive or negative, if the value is positive, the shadow is on the right side of the object, and the value is negative, the shadow is on the left side of the object

3. V-shadow: Refers to the vertical offset of the shadow, which can also be a positive negative value, if it is positive, the shadow at the bottom of the object, and vice versa, when the value is negative, the shadow at the top of the object

4. Shadow Blur Distance: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the larger the value, the more blurred the edge of the shadow

5. Shadow Shadow Size: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow expands, the inverse value is negative, then shrinks

6. Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color, but the browser default color is not the same

box-shadowOne or more projections can be used, and if multiple projections are used, they must be separated by commas.

box-shadow: 3px 3px 3px orange, 3px 3px 3px red;

Box-sizing

This property is also related to the border, the traditional box model width refers to the content area, and padding, border, but this has a certain difficulty in the layout

box-sizingCan change the box model

1. Content-box: Standard box model
2. Border-box:
   width = padding-left + padding-right + border-left-width + border-right-width + content width
   Height = padding-top + padding-bottom + border-top-width + border-bottom-width + content Height

div {    width: 100px; // width 包含了左右padding的宽度 + 左右border的宽度 height: 100px; // height 包含了上下padding的宽度 + 上下border的宽度 padding: 20px; border: 1px solid #000; box-sizing: border-box;}

Text-overflow

1. Clip: Hide out of text
2. Ellipsis: Displays the ellipsis to represent the trimmed text.

Additional property mates are required for the ellipsis effect

p {    width: 100px;    overflow: hidden;    white-space: nowrap; text-overflow: ellipsis;}

Worried about someone asking questions. The above code can only display ellipses in the first line, what if I want to show on the second or third line?

The principle is that by pseudo ::after -elements to achieve is not very easy.

Transitions and animations

CSS3 animations are natively supported by the browser, and the benefits are smooth

Transition (Transition)

Before the introduction transition of CSS3, the CSS had no timeline, and all state changes were instantaneous.

transitionSpecifies the time required to change the state.

div {    width: 100px;    height: 100px; border: 1px solid #000; background-color: #000; transition: all 1s;}div:hover { width: 200px; height: 200px;}

Specifying properties

We can also specify the properties that transition applies To

div {    transition: 1.5s width;}

In this way, only the height change takes 1 seconds to implement, and the other changes (mostly width) are still instantaneous.

In the same line transition statement, you can specify multiple properties individually

div {    transition: 1.5s width, 1s height;}

Delay

Delay: Chinese translation delays, as the name implies is how long delay in the execution of state changes.

It is important to note that the delay parameter is at the back of the time

div {    transition: 状态完成时间 height, 状态完成时间 延迟时间(delay) width;}

div {    transition: 2s height, 0.5s 2s width;}

The real meaning of delay is that it specifies the order in which the animations occur, so that multiple different transition can be linked together to create complex effects

Transition-timing-function

Transition state Change Speed (also known as timing function), the default is not uniform, but gradually slowed down, this is called ease

div {    transition: 1s ease;}

In addition to ease, other modes include

• Linear: Constant speed
• Ease-in: Accelerating
• Ease-out: Deceleration
• Ease-in-out: Specifies the transition effect at a slow start and end
• Cubic-bezier function: Custom Speed mode link

Precautions

1. Currently, major browsers (including IE 10) already support the transition, so transition can safely not add browser prefixes transition compatibility
2. Transition need to know clearly, the start state and the end state of the specific values in order to calculate the middle state, what none to block and so on is not possible
3. Transition are disposable and cannot be repeated unless triggered repeatedly.

CSS3 _border && Transition