HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
导读:收集整理的这篇文章主要介绍了HTML+css盒子模型案例(圆,半圆等 “border-radius” 简单易上手,觉得挺不错的,现在分享给大家,也给大家做个参考。 很多小伙伴在前端学习的时候,发现盒子模型默认为正方形。如何把盒子变...
收集整理的这篇文章主要介绍了HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手,觉得挺不错的,现在分享给大家,也给大家做个参考。 很多小伙伴在前端学习的时候,发现盒子模型默认为正方形。如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况----
!DOCTYPE htML> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=Edge"> meta name="viewport" content="width=, inITial-scale=1.0"> style> .box{ width: 100px; height: 100px; background-color: rgb(116, 51, 51); box-shadow:0 10px 10px red; text-align: center; position:absolute; margin:0 auto; left:0; right:0; bottom:0; top:0; } /style> title> Document/title> /head> body> div class="box"> /div> /body> /html> @H_304_4@默认情况下为正方形,也许小伙伴觉得不太好看。 我们换成圆形的试试!
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> style> .box{ width: 100px; height: 100px; border-radius: 50%; background-color: rgb(28, 99, 60); border: 5px solid rgb(55, 0, 255); position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 0; top: 0; } /style> title> Round/title> /head> body> div class="box"> /div> /body> /html>看一下我们变成了圆形! 来看看半圆形的吧!
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> style> .box{ width: 100px; height: 50px; background-color: rgb(175, 42, 216); border: 3px solid rgb(26, 236, 26); border-top-right-radius: 50px; border-top-left-radius: 50px; position:absolute; margin: 0 auto; left: 0; right: 0; bottom: 0; top: 0; } /style> title> SEMicircle/title> /head> body> div class="box"> /div> /body> /html>来试试其他形状!
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> style> .box{ width: 100px; height: 100px; background-color: rgb(82, 84, 223); border-radius: 20px 15px 20px 10px; position: absolute; margin: 0 auto; left: 0; bottom: 0; right: 0; top: 0; } /style> title> demo/title> /head> body> div class="box"> /div> /body> /html>知识点分析:
border-radius:给元素设置圆角边框
可以实现圆,半圆,椭圆,四分之一圆等各种圆角图形。
可以设置四个值,分别为左上,右上,右下,左下
给个口诀,“从左上开始顺时针移动”。。。希望这篇文章能让你学会border-radius属性!
到此这篇关于HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单上手的文章就介绍到这了,更多相关html css盒子模型内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
本文地址: https://pptw.com/jishu/588545.html