css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
盒子模型
Title
/* body 总有一个默认的外边距 */
/* 常见操作 */
body{
margin: 0;
padding: 0;
text-decoration: none;
}
/* border 粗细 样式 颜色 */
#box{
width: 300px;
border: 1px solid red;
padding: 0 0 0 0;
}
h2{
/* 去外边距 */
margin: 0;
font-size: 16px;
background-color: gold;
line-height: 30px;
color: white;
}
form{
background: gold;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed purple;
}
div:nth-of-type(3) input{
border: 2px dashed red;
}
会员登录
账户：
密码：
邮箱：
外边距
Title
/* 顺时针旋转 上右下左 */
/* margin:0 全0 */
/* margin:0 1px 上下0 左右1 */
/* margin:0 1px 2px 3px 上右下左*/
#box{
width: 300px;
border: 1px solid red;
/* 上下为0 左右居中 */
margin: 0 auto;
}
h2{
margin: 0;
font-size: 16px;
background-color: gold;
line-height: 30px;
color: white;
}
form{
background: gold;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px;
}
会员登录
账户：
密码：
邮箱：
圆角边框
边框圆角
Title
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px;
}
圆形
Title
div{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
img{
border-radius: 37px;
}
阴影
Title
img{
margin: auto;
border-radius: 37px;
box-shadow: 10px 10px 50px yellow;
}
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14980267.html
版权所有，如需转载请注明出处。
css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型相关推荐
- CSS3学习笔记三---怪异盒模型 | 弹性盒*
一:怪异盒模型 1:box-sizing: content-box:正常盒子模型 2:box-sizing: border-box:怪异盒模型 两者区别:正常盒子宽高设置好了,之后加padding.b ...
- HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记 文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- 【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记 一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法 二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
- 前端开发学习笔记（一）：HTML
前端开发学习笔记(一):HTML 文章目录 前端开发学习笔记(一):HTML 一. HTML的文档结构 二.标签属性 2.1. 标签属性 2.2. 文字格式化标签 2.3. html实体转义 三. t ...
- 【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局 圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
- HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础 今天是居家隔离第一天,自学HTML5. 1.1HTML概述 什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
最新文章
- HTML编码问题导致的乱码
- 机器学习-预测之时间序列分析预测法原理及实战
- Dotnet创建Linux下的Service应用
- BiSeNet V2论文及源码
- 一个深度学习痴呆选手对AlexNet网络架构的一些理解
- Android中Java与web通信
- 前端实践（1）——加载显示word文档内容
- hibernate教程笔记8
- 基于python的MUSIC算法
- 20200903尝试解决屏幕录像专家在WIN10的2004版本下录音有噪声+无声的问题
- java9 32位官网下载_jdk1.9 32位官方下载
- JS对象（对象的创建、属性的增删改查、属性的检测和枚举）
- 64位处理器_为什么苹果A处理器领先安卓2年？从什么时候开始领先的？有何依据...
- 关于安装anaconda错误：failed to create anaconda menus
- 如何把应用程序和资料转移到新的硬盘？
- Matplotlib绘图笔记
- 湖南省计算机等级考试(二级)题库 第六部分
- 让360浏览器默认使用极速模式打开网页
- VirtualLab基础实验教程-7.偏振（2）
- Python爬虫 爬取豆瓣电影TOP250