Learn the Web from scratch CSS3 (four) border picture, transition

Source: Internet
Author: User

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

  • Github:https://github.com/daotin/web
  • Public number: The top of the Web front
  • Blog Park: http://www.cnblogs.com/lvonve/
  • csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, border picture

Border Picture: Just Add the picture background to the border .

The border we added earlier is a solid color, so how do we add a picture to the frame?

Principle: A picture is divided into nine Gongge, and then each corresponds to the element that needs to be added to the border.

Also, adding a border picture is added as a background , so it is possible to overwrite the text with the border, and the processing method is described later.


/* border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点 */border-image-source: url("../images/border1.png");/* border-image-slice:设置四个方向上的裁切距离, fill:做内容的内部填充 */border-image-slice: 27 fill;/* 如果四个边框的宽度不同,可以设置4个值*/border-image-slice: 27 10; /*左右27 上下10*/border-image-slice: 27 20 15 5 fill; /*左27 下20 右15 上5*//*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。细节:1.边框图片的本质是背景,并不会影响元素内容的放置  2.内容只会被容器的border和padding影响建议:一般将值设置为原始的边框的宽度*/border-image-width: 27px;/*border-image-outset:扩展边框:将边框扩大,但是会影响元素的大小,box-sizing也不可挽回,建议不使用。*/border-image-outset: 0px;/*border-image-repeat:repeat:直接重复平铺,可能有不完整的图像round:将内容缩放进行完整的重复平铺stretch:将内容拉伸(此为默认值)*/border-image-repeat: round;

The above content can be ligatures ( Note that some attributes need to be separated ):

/*border-image: source slice / width / outset repeat;*/border-image: url("../images/border1.png") 27 fill / 27px / 0px round;
Case: QQ Bubbles

When we send the QQ message, we can choose a lot of different bubble styles, and when we send the message, regardless of the number of words, bubble border style is not changed, but only the middle content of the fill. If it's just a simple bubble stretch, the corners will become ugly, so you need to use the technology of the border picture.

<!DOCTYPE html>

Ii. transition

With Transitions transition , we can add effects to elements when they are transformed from one style to another without using Flash animations or JavaScript.

To achieve this, two elements must be established:

    • 1. Specify which CSS attributes you want the effect to be added to;

    • 2. Specify the length of the effect.

1. Basic grammar
/*1.transition-property:添加过渡效果的样式属性名称*/transition-property: left;/*2.transition-duration:过渡效果的耗时 以秒做为单位*/transition-duration: 2s;/*3.transition-timing-function:设置时间函数--控制运动的速度*/transition-timing-function: linear;/*参数说明:steps(n):n代表次数,就是动画分几次走完。(比如秒针的走动)linear:规定以相同速度开始至结束的过渡效果。ease:规定慢速开始,然后变快,然后慢速结束的过渡效果。ease-in:规定以慢速开始的过渡效果。ease-out:规定以慢速结束的过渡效果。ease-in-out:规定以慢速开始和结束的过渡效果。*//*4.transition-delay:过渡效果的延迟,间隔多少时间后才开始动画。*/transition-delay: 2s;

Note: Add transition effect: When the transition finishes executing, the default reverts to the original state.

2. ligatures Style
transition: property duration timing-function delay;

Parameter description:

property: Property Name

duration: Transition Time

timing-function: Time function

delay: Delay Time

Add transitions to multiple styles at the same time:(separated by commas)

transition: left 2s linear 0s,            background-color 5s linear 0s;

To add a transition effect to all styles: all : All Styles

transition:all 2s steps(4);


  1. All styles have the same transition effect.
  2. Inefficient, it will query all the added styles.
  3. It is not advisable to write this.
3. Suggestions for use

Since transition was first introduced by the WebKit kernel browser, Mozilla and opera are the latest versions to support this attribute, and our popular browser IE family is not supported, in addition, due to the large modern browser Firefox,safari, Chrome,opera are not supported by the standard way of writing, so in the application of transition we need to add their own prefixes, it is best to write in the end of the standard of our world, so the standard way to support the browser will overwrite the previous wording, as long as the browser support our Transition property, the effect is automatically added, such as:

-moz-transition: all 1s ease;-webkit-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease; /*放在最后*/
4, Case: accordion effect

Effect: The mouse is placed on each label and slowly pulls out the details.

<!     DOCTYPE html>

Learn the Web from scratch CSS3 (four) border picture, transition

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.