CSS Кодтарының мағынасы - 3

admin 2019-05-07 ℃ Қысқаша

CSS Кодтарының мағынасы...

Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол

11. border-top-left-radius

Жақтаудың жоғарғы сол жақ бұрышының айналмалы радиустарын орнатады.

шекаралық сызықтармен жәнеде фондық түспен де белгіленеді.

Code:

Esten Tech

<!DOCTYPE htm>
<html>
<head>
<meta charset="utf-8">
<title>border-top-left-radius</title>
<style>
.title {
background: #000080;
color: #ffe;
padding: 7px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
border: 1px solid #000080;
background: #f0f0f0;
padding: 7px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="title">Esten Tech</div>
<div class="content">
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
</div>
</body>
</html>

Мысалға:

Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

12. background-color

Фондық түс (Артқы көрініс) .

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-color</title>
<style>
body{
background-color: #3366CC;
}
h1 {
background-color: RGB(249, 201, 16);
}
p {
background-color: maroon;
color: white;
}
</style>
</head>
<body>
<h1>Esten Tech</h1>
<p>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>
</body>
</html>

Мысалға:

Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

13. border-bottom-right-radius

Белгіленген кестенің немесе шекаралық сызықтың оң жақ бұрышын доғалдау немесе радиусын орнату .

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-right-radius</title>
<style>
.radius {
background: #fc0;
padding: 15px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div style="border-bottom-right-radius: 20px" class="radius">
border-bottom-right-radius: 20px
</div>
<div style="border-bottom-right-radius: 70px 40px" class="radius">
border-bottom-right-radius: 70px 40px
</div>
</body>
</html>

Мысалға:

Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

14. border-radius

Жақтаудың бұрыштық радиусын орнатады. Егер рамка орнатылмаса, онда дөңгелектеу фонмен де жүреді.

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
.radius {
background: #f0f0f0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 15px; /* Поля вокруг текста */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<div style="border-radius: 50px 0 0 50px;" class="radius">
border-radius: 50px 0 0 50px;
</div>
<div style="border-radius: 40px 10px" class="radius">
border-radius: 40px 10px;
</div>
<div style="border-radius: 10em/1em;" class="radius">
border-radius: 13em/3em;
</div>
<div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
border-radius: 13em 0.5em/1em 0.5em;
</div>
<div style="border-radius: 8px;" class="radius">
border-radius: 8px;
</div>
</body>
</html>

Мысалға:

Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

15.border-top-right-radius

Жақтаудың жоғарғы сол жақ бұрышының айналмалы радиустарын орнатады.

шекаралық сызықтармен жәнеде фондық түспен де белгіленеді.

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-top-right-radius</title>
<style>
.radius {
background: #f0f0f0;
border: 1px dashed #000;
padding: 15px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div style="border-top-right-radius: 10px" class="radius">
border-top-right-radius: 10px
</div>
<div style="border-top-right-radius: 70px 40px" class="radius">
border-top-right-radius: 70px 40px
</div>
</body>
</html>

Мысалға:

Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

Дайындаған: Естен Ербол

Esten Tech： CSS Кодтарының мағынасы - 3

Барлық құқықтар қорғалған

CSS Кодтарының мағынасы - 2

CSS Кодтарының мағынасы - 4

Ұқсас тақырыптар

CSS Кодтарының мағ

CSS Кодтарының мағынасы - 3

Ұқсас тақырыптар

Қызғынды

TAG