border-radius - web秀

#border-radius#

共找到 border-radius 相关内容 5 条

6年前

纯CSS3绘制腾讯QQ的企鹅Logo

纯CSS3绘制腾讯QQ的企鹅Logo

前言经常能够看到一些用CSS3绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形,梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。前面有文章CSS绘制三角形和箭头，不用再用图片了，可以先去了解一下！在使用border-radius时，有几点可能需要注意一下：1.border-radius，可以分别对4个角进行设定。例如上图：border-top-left-

554819 3931 0

5年前

CSS制作可爱的小猪，祝大家2019“猪”事顺心

CSS制作可爱的小猪，祝大家2019“猪”事顺心

前言时间过得真快，2019年也是说来就来，时间是真的不等人啊。新的一年小伙伴们都有什么目标呢？赶紧向着目标努力吧，2020也会眨眼即到。2019，祝大家“猪”事顺利，事事顺心！接下来进入今天的课题。用CSS制作一个小小的、可爱的小猪。主要用到的技术有border-radius、transform:rotate等等。预览图：主体结构<divclass="pig"><divclass="body"><divclass="ear"></div><divcla

556333 3759 0

5年前

CSS3 box-shadow实现背景动画

CSS3 box-shadow实现背景动画

前言语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;box-shadow，向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。参数说明：值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅CSS颜色值。inset可选。将外部阴

556617 3773 0

2年前

CSS3萌宠系列，纯CSS3诞生的可爱狗狗

CSS3萌宠系列，纯CSS3诞生的可爱狗狗

好可爱一只小狗狗！睡觉憨憨的样子，听到细微的声音，立马竖起他的耳朵，看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢？可爱的你值得拥有！上图是用什么软件制作的呢？用纯CSS+HTML你信吗？不信的，让我们拭目以待吧！看图解构看上图，狗狗有圆圆头，2只小小的眼睛和2只长长的耳朵，鼻子，嘴巴，4只脚，身体、尾巴组成。细节：1、地上有阴影，狗狗抬头时阴影会缩小2、狗狗是趴着在，所有只能看到3只脚3、狗狗睡觉时，呼吸会让身体上下起伏4、狗狗抬头时，耳朵会上扬有了结构思路，我们可以先来画出大致的样子狗狗身体结构

548347 3232 0

3年前

CSS3基础知识：box-shadow, outline 实现边框内圆角

CSS3基础知识：box-shadow, outline 实现边框内圆角

知识点分析我们都知道box-shadow是会紧贴border-radius圆角边的，但是，描边outline并不会与圆角边border-radius贴合，我们可以将两者组合，通过box-shadow去填补描边outline所产生的间隙来达到边框内圆角的效果。示例代码<main><inputid="ck"type="checkbox"checked/><labelfor="ck">box-shadow</label><div><p>楼上

547209 3244 0

下拉加载更多