Q )
ляя их параметры м еж ду с о б о й запятой. Учиты-
вается следую щ ий порядок: первая тень в сп и с-
ке р азм ещ а ет ся на са м о м верху,
п осл едн яя в
сп и ск е - в сам ом низу. Н апример (р и с . 4):
<im g src= ”straw berry.jpg” style= ”b ox-shadow : Зрх
Зрх Зрх # 8 8 8 ” >
или
<im g src= ”straw berry.jpg” style= ”b ox-shadow : 2рх
2рх 0 # d d d , 2рх 2рх 2рх # с с с ”>
Закругление рамок
П
рош ли те вр ем ен а, когда в се на в еб-ст р ан и -
ц е и м ел о заостр ен н ы е углы. Т еперь их м ож -
но сглаж ивать при
п ом ощ и св о й ст в а
b o r d e r -
ra d iu s ,
которое устанавливает радиус скругления
уголков рамки. Если рамка н е задан а, то скругле-
ние также происходит и с ф он ом . Ф ормат:
b o r d e r -r a d iu s: р а д и у с 1 р а д и у с 2 .
..
Д опускается указывать одн о, два, три или четы-
р е значения, перечисляя их ч ер ез п робел (т а б л и -
ц а 1). Также доп усти м о писать дв а значения ч ер ез
слэш
В качестве значений указы ваются числа
в лю бом доп усти м ом для C S S ф ор м ате. В случае
прим енения процентов, отсчет в едется от н оси -
тельно ширины блока.
В сл едую щ ем п р и м е-
р е
п р едстав л ен ы
н е -
сколько вариантов ука-
зания парам етров:
<htm l>
< h ea d >
< style>
.radius {
b ack grou nd :
#fOfOfO;
/* Цвет ф он а */
border: 1px solid black;
Г
Параметры рамки */
padding: 15px; /* Поля вокруг текста */
m argin-bottom : Юрх; /* Отступ сн и зу */
width: 400рх;
}
< /sty le>
< /h ea d >
< bod y>
<div style= ”border-radius: 50px
0 0 50p x;” c la ss= ”radius”>
border-radius: 50px 0 0 50px;
</div>
<div style= ”border-radius: 40p x
10px” c la ss= ”radius”>
border-radius: 40p x 10px;
</div>
<div style= ”border-radius:
1 0 em /1 em ;” c la ss= ”radius”>
border-radius: 13em /3 em ;
</div>
<div
sty le = ”b ord er-radiu s:
13em
0 .5 e m /1 e m
0 .5 em ;B
c la ss= ”radius”>
border-radius: 13em 0 .5 e m /1 e m 0.5em ;
</div>
<div style= ”border-radius: 8px;” c la ss= ”radius”>
border-radius: 8px;
</div>
< /b o d y >
</htm l>
В р езультате у нас получились вот такие блоки
(р и с . 5 ). То ж е с а м о е м ож но проделать и с и зо б -
раж ениями. А есл и ещ е добави ть тень.
..
Рамки
С
ей ч ас практически ни один сайт не о бход и т -
ся б е з иллю страций и гал ер ей . И как бы вает
к раси во,
когда к аж дое ф о т о на в еб -ст р а н и ц е
оф ор м л ен о в вы разительную рамку.
Такую рамку м ож но легко сдел ать при помощ и
уж е
к а за л о сь
бы
привычных
св ой ств
b a c k g ro u n d
и
b o rd e r.
Например:
<htm l>
< style >
/* граница внутри, ф он снаружи
.ram kal {
background: # 0 0 0 ;
border: 4р х solid #ddd;
padding: 1px;
}
Г
граница снаружи, ф он внутри */
.ram ka2 {
background: #ddd;
border: solid 1px # 0 0 0 ;
padding: 4px;
}
Т а б л и ц а 1
.
З а в и си м о ст ь от ч и с л а з н а ч е н и й
Число
значений
Р е зу л ь т а т
1
Радиус указы вается для всех четы рех уголков.
2
П ервое зн ач ен ие за д а е т радиус верхнего левого и
ниж него правого уголка, втор ое зн ач ен ие - верхнего
правого и нижнего л евого уголка.
3
П ервое зн ач ен ие за д а е т р ади ус для верхнего левого
уголка, втор ое - о д н ов р ем ен н о для верхнего правого и
нижнего левого, а третье - для нижнего правого уголка.
4
По очереди устанавливает радиус для верхнего левого,
верхнего правого, нижнего правого и нижнего левого уголка.
-------------------------------------------------------------------------------------
В Гершнии видеорегистраторы за-
прещены. Поэтому метеорит, желая
стать звездой, полетел в Челябинск.
'
>
-
Просыпайся,
б у-
дильник звонит!
- Я сплю.
.. Я ему поз-
же сам перезвоню.
..
предыдущая страница 37 Компьютер 2013 04 читать онлайн следующая страница 39 Компьютер 2013 04 читать онлайн Домой Выключить/включить текст