Until the creation of various beauties, the first such beauty will be the frame.

For starters, let's look at the simplest frames. For their CSS creation, the authority of the border is used, which can be set to the following values:

solid – solid frame;

dashed – dotted frame;

dotted – dot frame;

double – frame of the subline;

groove – frame made of shade;

ridge – with relief;

Two more powers are necessary for the creation of simple frameworks - this

widht – frame tovshchina;

color – frame color;

It is better to use a shorthand technique, write down the values ​​in one row, through a space.

p(
border: 2px solid #ffff00;
}

padding - internal (frame entry to space);

margin - External (the frame is exposed to external objects);

Directions are also specified for the entrances (from which side to how many to enter). This power will stagnate if there is a need to place the frame not in the center, but the frame itself with any displacements.

top – access to the beast;

right - entrance to the right;

bottom - access from below;

left – left-handed access

The values ​​of these authorities are written down in the shortened version one by one (padding: 10px 30px 15px 20px), and the top values ​​are placed first, and then the other ones follow the year arrow.

If you put only one value, it means that the access from both sides will be the same.

p(
border: 2px solid #ffff00;

margin: 20px;
}

If you need to place text or images in the center of the frame, you can add text-align: center to the “p” selector;

Let's take a look at how the height is set frame width. The height of the frame is set automatically by the browser, and is selected in such a way that it fits the space according to the order of the entry tasks. And the width of the axis behind you can be set independently.

The width is set to the power, and the value indicates the desired size in pixels, as well as other inputs received from the Internet.

p(
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px;
margin: 20px;
width: 400px;
}

Before speaking, remember that with a given width, the browser only understands the width instead. Then, to this value, the specified input and thickness of the frame are added, and the remaining size represents the side.

The only thing left that needs to be done is to place the frame on the side. To fight for the help of the already obvious power margin.

And if you just need to move the frame block in the center of the page, then the margin value is set to auto.

p(
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

For the first example, we create an html document and create a solid frame for the body block (the body of the document) and one paragraph.

On the other side, the CSS will be changed (those placed in the style tag).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

In this case, next to the element there is a black frame, which is reinforced against the background with a white trim (small 1).

Rice. 1. Frame around the element

Frame under the hour of the vikoristan:hover

When adding a frame through the border, an increase in the width of the element is created, which is noticeable when adding a border and pseudo-class: hover. There are two ways to overcome this. The simplest thing is to replace border with outline, which, as we know, does not affect the size of the element (example 2).

Butt 2. Frame under pointing hour

The outline will never be suitable, although there is no point in the rounded corners. Here another method is suitable - add an invisible frame or a frame that matches the color of the background, and then change the parameters when hovering (example 3). Therefore, there will be no displacement of the element, since the frame is already there. Remember that the width of an element is the sum of width , border is left-handed and border is right-handed. It’s the same with height.

Butt 3. Frame under pointing hour

Frame around the fields of the form

In some browsers (Chrome, Safari, other versions of Opera), a small colored frame (small 2) is displayed next to the form fields when the focus is released. To do this, it is enough to add the power outline value to none , as shown in Exhibit 4.

Rice. 2. Frame around the edges

Butt 4. Taking the frame

Frames via box-shadow

Although the power of box-shadow is used to add shadow around an element, it can be used to create frames that cannot be created through border or outline. All that matters is that the number of shadows may be indispensable, and the parameters of which to play it safe through a coma.

To remove the frame, set the first three parameters to zero, they indicate the position of the tone and pitch. The fourth parameter determines the thickness of the border, and the fifth parameter sets the color of the frame. For another frame, the fourth parameter is the same as the sum of the thickness of the two frames.

Exhibit 4 shows the addition of two frames and one between the right-handers with the help of one box-shadow power.

Butt 4. Vikoristannya box-shadow

The result of this butt readings is shown in Fig. 3.

Rice. 3. Frames created by power box-shadow

One of the useful additions to the CSS3 box-shadow is the creation of a floating border around the element. This is a very useful effect for the design of pages, although it will only occur in new versions of browsers that support box-shadow.

However, there are a number of other methods for creating this effect. Moreover, the obvious distortion of the background image is far from ideal.

This lesson presents five methods for creating a sub-frame around an element. Moreover, only one of them displays images, and decides to use pure CSS code with special support in browsers.

Method 1: border and outline

This method only works in browsers that support outline power (all except IE6/7). You add an element of resentment to the authorities border and outline.

One ( border: solid 6px #fff; outline: solid 6px #888; )

The reason behind this method is that the outline frame is always drawn from the outside of the rectangle. The problem of outline clarity appears when the floating elements become distorted, causing the frame to overlap with the floating elements.

Method 2: Pseudo Element

This method relies on the absolute positioning of the frame:

Two ( border: solid 6px #fff; position: relative; z-index: 1; ) .two:before ( content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10;

The key points are setting the z-index power (so that the pseudo element overlaps the area), positioning and min-height values. Remaining power preserves the elasticity of the frame.

Method 3: shade

In the shortest way, you only need one row of code with box-shadow settings.

Three (box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

To create a hanging frame, two shades are used. The stench appears through a coma. The size is set to 0. The other shadow is overlapped by the first, which is twice as wide. The key point is the selection of obscure colors, which creates clarity between the frames.

Because the power of the outline box-shadow does not flow into the existing elements and can overlap them. Therefore, you need to set the field for shaping the external appearance of the composition.

Of course, the box-shadow support is limited by new browsers.

Method 4: Add-on div element

Which method has an external element?