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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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 在文件指定行插入数据的代码
2010/05/08 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js匿名函数作为函数参数详解
2016/06/01 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
超市采购员岗位职责
2014/02/01 职场文书
村干部承诺书
2014/03/28 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
如何正确理解python装饰器
2021/06/15 Python