圆角边框

1.圆形

语法

border-radius:length;

方法：让一个正方形变成圆圈

div {width: 200px;height: 200px;background-color: pink;/* border-radius:length; */border-radius: 50%;
}

我们想在网页里导入图片变成圆形头像就可以用这个方法

如上，只需要导入一张图片再用我们的border-radius:length;

代码如下：

div {width: 200px;height: 200px;background-image: url(images/猫.gif);/* border-radius:length; */border-radius: 50%;
}

2.圆角矩形

圆角矩形的话只给高度的一半就可以了。不用百分比，精确单位。

 p {width: 100px;height: 20px;background-color: red;color: #fff;/* border-radius:length; */border-radius: 10px;
}

盒子阴影

div {width: 200px;height: 200px;background-color: pink;/*border-radius: 100px;*/border-radius: 50%;/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影；*/box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}

如下

注：外阴影(outset)是默认的，不能写，想要内阴影可以写(inset)

CSS圆角边框和盒子阴影相关推荐

CSS圆角边框、盒子阴影及文字阴影详解
文章目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框在CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
Web前端入门（十八）圆角边框及盒子阴影
总目录:https://blog.csdn.net/treesorshining/article/details/124725459 文章目录 1.圆角边框 2.盒子阴影 2.1 开发中阴影常用语句 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
CSS的盒子模型、圆角边框、盒子阴影、文字阴影及ps操作
目录一.盒子模型 (一)边框 border 1.基本写法 2.分开写 3.表格细线边框 border-collapse 4.border与盒子大小 (二)内边距 padding 1.基本写法 2.分 ...

CSS圆角边框和盒子阴影

圆角边框

1.圆形

2.圆角矩形

盒子阴影

CSS圆角边框和盒子阴影相关推荐

最新文章

热门文章