თვისება text-stroke-width
თვისება text-stroke-width ადგენს ტექსტის სიმბოლოების კონტურის
სისქეს ან მათი გარშემოწერილობის. თვისება
იღებს მნიშვნელობებს, რომლებიც მითითებულია ზომის ერთეულებში
როგორიცაა px, em, rem და ა.შ. ასევე
შესაძლებელია შემდეგი მნიშვნელობების მითითება: thin (თხელი ხაზი),
medium (საშუალო ხაზი) და thick
(მსხვილი ხაზი).
სინტაქსი
სელექტორი {
text-stroke-width: რიცხვი ან thin ან medium ან thick;
}
მაგალითი
მოდით, ჩვენი ტექსტის სიმბოლოებს მივანიჭოთ თხელი გარშემოწერილობა:
<p>
ტექსტი
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: thin;
text-stroke-width: thin;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
მაგალითი
ახლა კი მოდით, თხელი გარშემოწერილობა შევცვალოთ საშუალოთი:
<p>
ტექსტი
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: medium;
text-stroke-width: medium;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
მაგალითი
მოდით, ჩვენი ტექსტის სიმბოლოებს მივანიჭოთ მსხვილი გარშემოწერილობა:
<p>
ტექსტი
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: thick;
text-stroke-width: thick;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
მაგალითი
ასევე მოდით, ჩვენი ტექსტის სიმბოლოებს მივანიჭოთ
გარშემოწერილობა 2px-ში:
<p>
ტექსტი
</p>
body {
width: 100px;
height: 50px;
}
p {
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: 2px;
color: white;
font-size: 10em;
margin-top: 0;
font-weight: bold;
font-family: Arial;
}
:
იხილეთ აგრეთვე
-
თვისება
text-stroke,
რომელიც ადგენს ტექსტის გარშემოწერილობას -
თვისება
text-stroke-color,
რომელიც ადგენს ტექსტის გარშემოწერილობის ფერს