html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...

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

.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;

}

Document

默认情况下为正方形，也许小伙伴觉得不太好看。我们换成圆形的试试！

.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;

}

Round

看一下我们变成了圆形！来看看半圆形的吧！

.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;

}

semicircle

来试试其他形状!

.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;

}

demo

知识点分析：

border-radius:给元素设置圆角边框

可以实现圆，半圆，椭圆，四分之一圆等各种圆角图形。

可以设置四个值，分别为左上，右上，右下，左下

给个口诀，“从左上开始顺时针移动”。。。

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

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

html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...相关推荐

HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型第4章 CSS盒子模型_教学设计.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 1 <HTML+CSS+JavaScript网页制作案例教程> 教学设计课程名称: HTML+CSS+JavaSc ...
css中盒模型的属性包括(),css的盒子模型属性有哪些？css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
html 盒子写法,CSS盒子模型
CSS盒子模型 1. 盒子模型的组成 CSS盒子模型本质上是一个盒子,封装周围的HTML元素. 包括:边框border.外边距margin.内边距padding.实际内容content. 2. 边框b ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
css盒子模型有几种?以及盒模型设置？
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种: 第 ...
CSS 盒子模型（border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
CSS盒子模型-小白学习中
CSS盒子模型一.盒子模型的概念一个独立的盒子模型由内容.边框(border).内边距(padding)和外边距(margin)4部分组成. 1.border是设定边框线条,盒子的其他部分是相对b ...
2 在UML中有4种事物:结构事物、行为事物、分组事物和注释事物。其中，（）事物表示 UML模型中的名词，它们通常是模型的静态部分，描述概念或物理元素。以下（）属于此类事物。
标签: 初级程序员考试易错题,计算机基础, 面向对象基础,统一建模语言 (UML) 2 在UML中有4种事物:结构事物.行为事物.分组事物和注释事物.其中,( )事物表示 UML模型中的名词,它们通常 ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...

html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...

html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...相关推荐

最新文章

热门文章