Главная » HTML5 » Как сделать внутрений радиус блока?
Символы юникода Notepad++ Сокращение Типографика Начало css index.html Микроразметка style.css Блоки DLE Теги DLE
29 0  

Как сделать внутрений радиус блока?

Оказывается можно имитировать внутренний радиус через отрицательное значение радиуса.

Текст

Исполняемый код:

<div> <div class="round">Текст</div> </div> <style> .round { background: radial-gradient(circle at 0 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px), radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px), radial-gradient(circle at 100% 0, rgba(0,0,0,0) 35px, #BFE2FF 10px), radial-gradient(circle at 0 0, rgba(0,0,0,0) 35px, #BFE2FF 10px); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; max-width: 500px; margin: 20px auto; padding: 30px; font-family: Verdana, sans-serif; font-size: 16px; line-height: 22px; text-align: center; } </style>

Оставить свой комментарий:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021