纯Css3画出的凯蒂猫

原创

于 2019-01-31 23:23:42 发布 · 704 阅读

2 ·

CC 4.0 BY-SA版权

这篇博客展示了如何仅用CSS3绘制出一个可爱的凯蒂猫形象。通过利用边框border属性设置圆角和透明颜色，创造出半圆效果，实现了凯蒂猫头部和身体的构造。博主分享了完整代码，并建议读者可以尝试添加背景颜色以提升视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：DW border属性
撰写时间：2019年1月31日

哈哈，直奔主题不多说废话，先看看效果图吧！
在这里插入图片描述
是不是好可爱，有没有被萌到？
首先，我们来看一下 HTML 的头部结构布局：css3的样式大部分都是利用边框border的属性来实现的。在盒子上给一个边框设置一下圆角的效果，把不想要的边设置为透明的颜色，就可以出现一个半圆的效果。下面我们来看一下代码和效果图这样方便理解：
在这里插入图片描述
这下面就是整个头部的代码和效果图：

@charset "utf-8";
/* CSS Document */
/*---------------------头部------------------*/
.content{
	 width: 350px;
	margin: 0 auto;
}
.phiz{
	width: 283px;
	height: 215px;
    border: solid 3px #4F3131;
	border-radius: 100px;
	border-top-color: transparent;
	margin: 0 auto;
	display: flex;
	justify-content: spa