Рамка из картинки (border-image) - PDF

Description
Возможности CSS3 Рамка из картинки (border-image) #round { -webkit-border-image: url(border.png) round; /* Safari */ -o-border-image: url(border.png) round; /* Opera */ #stretch

Please download to get full document.

View again

of 30
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Technology

Publish on:

Views: 17 | Pages: 30

Extension: PDF | Download: 0

Share
Transcript
Возможности CSS3 Рамка из картинки (border-image) #round { -webkit-border-image: url(border.png) round; /* Safari */ -o-border-image: url(border.png) round; /* Opera */ #stretch { border-image: url(border.png) round; -webkit-border-image: url(border.png) stretch; /* Safari */ -o-border-image: url(border.png) stretch; /* Opera */ border-image: url(border.png) stretch; Столбцы (column-count:).newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; Тень текста(text-shadow:) h1 { text-shadow: 5px 5px 5px #FF0000; Перенос текста(word-wrap:) p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; Фоны Размер фона в % (background-size: %) body { background: url(images/camomile.png); background-size: 100% 100%; background-repeat: no-repeat; Размер фона в px (background-size: px) body { background: url(images/camomile.png); background-size: 80px 80px; background-repeat: no-repeat; padding-top: 40px; Несколько фонов body { background: url(images/6.png), url(images/logo_the_simpsons.png); background-size: 100% 100%; background-repeat: no-repeat; Позиционирование фона (background-origin:) div { border: 1px solid black; padding: 35px; background-image: url('images/1.gif'); background-repeat: no-repeat; background-position: left; border-box padding-box content-box Геометрия Матрица преобразовании transform: matrix(a, c, b, d, tx, ty) Поворот(transform: rotate(30deg)) div { width: 200px; height: 100px; background-color: yellow; /* Rotate div */ -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ transform: rotate(30deg); /* Standard syntax */ Наклон(transform: skew) div { width: 100px; height: 75px; background-color: red; border: 1px solid black; div#div2 { -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ transform: skew(30deg,20deg); /* Standard syntax */ Перемещение(transform: translate) div { width: 100px; height: 75px; background-color: red; border: 1px solid black; div#div2 { -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */ transform: translate(50px,100px); /* Standard syntax */ Градиентный фон Линейный градиент сверху вниз #grad1 { height: 200px; background: -webkit-linear-gradient(green, gold); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(green, gold); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(green, gold); /* For Firefox 3.6 to 15 */ background: linear-gradient(green, gold); /* Standard syntax (must be last) */ Линейные градиенты под различными углами #grad1 { height: 100px; background: -webkit-linear-gradient(0deg, greenyellow, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(0deg, greenyellow, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, greenyellow, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, greenyellow, green); /* Standard syntax (must be last) */ Градиент по диагонали #grad1 { height: 200px; background: -webkit-linear-gradient(left top, Highlight, greenyellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, Highlight, greenyellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, Highlight, greenyellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, Highlight, greenyellow); /* Standard syntax (must be last) */ Линейный градиент слева напрово #grad1 { height: 200px; background: -webkit-linear-gradient(left, Highlight, greenyellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, Highlight, greenyellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, Highlight, greenyellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, Highlight, greenyellow); /* Standard syntax (must be last) */ Плавный переход #grad2 { height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */ Линейный градиент сверху вниз #grad1 { height: 200px; background: -webkit-linear-gradient(green, gold); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(green, gold); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(green, gold); /* For Firefox 3.6 to 15 */ background: linear-gradient(green, gold); /* Standard syntax (must be last) */ Радиальный градиент(%) #grad1 { height: 150px; width: 200px; background: -webkit-repeating-radial-gradient(gold, lightblue 10%, green 15%); /* For Safari 5.1 to 6.0 */ background: -o-repeating-radial-gradient(gold, lightblue 10%, green 15%); /* For Opera 11.6 to 12.0 */ background: -moz-repeating-radial-gradient(gold, lightblue 10%, green 15%); /* For Firefox 3.6 to 15 */ background: repeating-radial-gradient(gold, lightblue 10%, green 15%); /* Standard syntax (must be last) */ Радиальный градиент(переход) #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(gold 5%, lightblue 15%, green 60%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(gold 5%, lightblue 15%, green 60%); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(gold 5%, lightblue 15%, green 60%); /* For Firefox 3.6 to 15 */ background: radial-gradient(gold 5%, lightblue 15%, green 60%); /* Standard syntax (must be last) */ Радиальный градиент #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(gold, lightblue, green); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(gold, lightblue, green); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(gold, lightblue, green); /* For Firefox 3.6 to 15 */ background: radial-gradient(gold, lightblue, green); /* Standard syntax (must be last) */ Анимация Создание анимации (animation: myfirst) div { width: 100px; height: 100px; background: blue; -webkit-animation: myfirst 5s; /* Chrome, Safari,Opera animation: myfirst 5s; /* Chrome, Safari, Opera myfirst { from {background: blue; to {background: yellow; /* Standard syntax myfirst { from {background: blue; to {background: yellow; transition() div { width: 100px; height: 100px; background: lightblue; -webkit-transition: width 3s; /* For Safari 3.1 to 6.0 */ transition: width 3s; div:hover { width: 400px; Сложная анимация(transform и transition) div { width: 140px; height: 100px; background: gold; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ div:hover { transition: width 2s, height 2s, transform 2s; width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg);
Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks