Используя свойство border-radius CSS3, вы можете сделать «закругленные углы» для любого элемента. С помощью свойства border-radius вы можете использовать следующие правила:
(1) Четыре значения: первое значение — левый верхний угол, второе значение — правый верхний угол, третье значение — правый нижний угол, четвертое значение — левый нижний угол (2) Три значения: первое значение — верхний левый угол, второе значение — верхний правый угол и нижний левый угол, третье значение — нижний правый угол (3) Два значения: первое значение — верхний левый угол и нижний правый угол, второе значение — это верхний правый угол и нижний левый угол (4). Одно значение: четыре значения скругления одинаковы.
Если вы хотите, чтобы графика имела эффект закругленных углов, вам нужно добавить только один атрибут — атрибут border-radius. Если вы хотите, чтобы оно было очень круглым, увеличьте это значение.
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Главная страница</title>
<стиль>
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: rgb(151, 26, 49);
радиус границы: 10 пикселей;
}
изображение {
ширина: 100 пикселей;
высота: 100 пикселей;
радиус границы: 10 пикселей;
}
</стиль>
</голова>
<тело>
<дел>
<img src="../vue/1.jpg">
</div>
</тело>
</html>Если вы хотите, чтобы оно было круглым, просто напишите 100%.
эффект тени box-shadow
поле: 0 авто: нет необходимости контролировать верх и низ. Авто позволяет равномерно распределить левое и правое пространство, а затем помещает поле посередине. Функция auto позволяет равномерно распределить промежутки между левым и правым пространством.
0 означает отсутствие тени в горизонтальном направлении, второй 0 означает отсутствие тени в вертикальном направлении, а третий — размытие тени.
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Главная страница</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
div {
ширина: 500 пикселей;
высота: 500 пикселей;
цвет фона: зелено-желтый;
маржа: 0 авто;
box-shadow: 0 0 50px rgba (0, 0, 0, 0,5);
}
</стиль>
</голова>
<тело>
<div класс="d1">
</div>
</тело>
</html>На этом завершается статья о новых функциях CSS3 — эффекте тени box-shadow и округленном радиусе границы. Для получения дополнительной информации о новой функции CSS3 box-shadow, пожалуйста, найдите предыдущие статьи на сайте downcodes.com или продолжите просмотр связанных статей, я надеюсь. в будущем вы будете поддерживать downcodes.com!