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制作实战案例分析
Sep 18 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 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 中的输出缓冲
2006/12/21 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
php session 写入数据库
2016/02/13 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
9种改善AngularJS性能的方法
2017/11/28 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
关于Python数据结构中字典的心得
2017/12/04 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python实现日志按天分割
2019/07/22 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
python中wheel的用法整理
2020/06/15 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
服装设计专业毕业生推荐信
2013/11/09 职场文书
小学教师事迹材料
2014/01/13 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
网络技术专业求职信
2014/07/13 职场文书
安全生产年活动总结
2014/08/29 职场文书
五五普法心得体会
2014/09/04 职场文书
遗嘱范文
2015/08/07 职场文书