Памятка редко используемых css правил

Просто памятка самому себе. И может кому пригодится.

1. Маска для перехода в фон
2. Текст с фоном по краям с поддержкой padding при переносе строк
3. Обводка текста
4. Градиентный текст. И вообще любой фон под текстом.
5. Обрезка текста по количеству строк с троеточием. Слабая поддержка.

.box {background-color: #fff; padding: 30px; margin-bottom: 30px; color: #000; 
	font-weight: 900; text-transform: uppercase; width: 48%;}
.mask-image, .gradient-text p {background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); color: #fff;}
.mask-image p {-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60px);}
.bg-inline-text p {display: inline; background-color: #ffcc00; box-decoration-break: clone; 
	box-shadow: 0 0 0 3px #ffcc00; padding: 0 10px;}
.stroke-text p {-webkit-text-stroke: 1px #f64f59; color: transparent;}
.gradient-text p {-webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.line-clamp p {font-size: 15px; font-weight: 400; text-transform: none; line-height: 1.6; 
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}

<div class="box mask-image"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box bg-inline-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box stroke-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box gradient-text"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

<div class="box line-clamp"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus rem deserunt deleniti nobis molestiae! Quidem excepturi accusamus odit blanditiis quae est commodi inventore quaerat fugiat, quas quia assumenda nam reprehenderit facere dolor animi eius, dolores distinctio earum soluta? Fuga iusto et reprehenderit officiis! Minima saepe quae omnis officiis, accusamus impedit earum mollitia voluptas vero eos aperiam totam magnam dolorem aliquam!</p></div>