Home > Developer > Web Develop
One, border pictureHello 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!
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.
Grammar:
/* 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 ):
Case: QQ Bubbles/*border-image: source slice / width / outset repeat;*/border-image: url("../images/border1.png") 27 fill / 27px / 0px round;
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. transitionWith 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 Styletransition: 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);
Disadvantages:
- All styles have the same transition effect.
- Inefficient, it will query all the added styles.
- It is not advisable to write this.
3. Suggestions for useSince 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 effectEffect: 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
