HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手


Posted in HTML / CSS onMay 10, 2021

很多小伙伴在前端学习的时候,发现盒子模型默认为正方形。如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况----

<!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>

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=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>

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=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>

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=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>

HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手

知识点分析:

border-radius:给元素设置圆角边框
可以实现圆,半圆,椭圆,四分之一圆等各种圆角图形。
可以设置四个值,分别为左上,右上,右下,左下
给个口诀,“从左上开始顺时针移动”。。。

希望这篇文章能让你学会border-radius属性!

到此这篇关于HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单上手的文章就介绍到这了,更多相关html css盒子模型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
修改发贴的编辑功能
2007/03/07 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python操作串口的方法
2015/06/17 Python
Python表示矩阵的方法分析
2017/05/26 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Django之腾讯云短信的实现
2020/06/12 Python
零基础学python应该从哪里入手
2020/08/11 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
C语言笔试集
2012/07/24 面试题
杭州时比特电子有限公司SQL
2013/08/22 面试题
少先队活动总结
2014/08/29 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书