CSS3 图形
圆：
#circle {
width: 140px;
height: 140px;
background: red;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
正方形：
#square {
width: 140px;
height: 140px;
background: blue;
}
椭圆：
#oval {
width: 200px;
height: 100px;
background: purple;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
上三角形：
#up-triangle {
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
下三角形：
#down-triangle {
width: 0;
height: 0;
border-top: 80px solid pink;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
左三角形：
#left-triangle {
width: 0;
height: 0;
border-right: 100px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
右三角形：
#right-triangle {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
梯形：
#trapezium {
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
菱形：
#diamond {
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
长方形：
#rectangle {
width: 140px;
height: 80px;
background: green;
}
平行四边形：
#parallelogram {
width: 130px;
height: 75px;
background: pink;
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
多边形：
#twelve-point-star {
height: 100px;
width: 100px;
background: orange;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
多边形：
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid red;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid red;
margin: 30px 0 0 -50px;
}
多边形3：
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
提示：
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
鸡蛋：
#egg {
display:block;
width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green;
/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
等边三角形：
#eq-triangle {
width: 0;
height: 0;
border-bottom: 104px solid navy;
/* 104 = 120 * 0.866 */
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
不完整圆：
.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid yellow;
border-left: 60px solid yellow;
border-bottom: 60px solid yellow;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
圆相关：
.biohazard {
width: 0;
height: 0;
border-bottom: 60px solid black;
border-top: 60px solid black;
border-left: 60px solid yellow;
border-right: 60px solid yellow;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
心形：
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2013年2月1日 11:32:40 星期五
相关推荐
《CSS3图形处理与动画》是一本深入探讨CSS3在网页设计中图形处理和动画效果应用的资源包。CSS3，即层叠样式表第三版，是Web开发领域的一个重要里程碑，它极大地丰富了网页的表现力，使得开发者可以通过纯CSS实现复杂...
标题中的“卡通星球行星CSS3图形特效”表明这个压缩包包含了一组利用CSS3技术创建的，具有卡通风格的行星图形动画效果。这些特效可能是为了在网页设计中增添趣味性和互动性，尤其适用于儿童或者科幻主题的网站。CSS3...
**CSS3基本图形** 在网页设计中，CSS3（Cascading Style Sheets Level 3）是一种强大的样式表语言，用于定义HTML或XML（包括SVG、MathML等）文档的呈现。CSS3引入了许多新的特性，其中之一就是能够用纯CSS创建各种...
本主题聚焦于“CSS3奇思妙想，单标签实现各类图形”，这是一项高效且节省资源的技术，可以极大地提升网页的性能和用户体验。我们将探讨如何仅通过一个HTML标签，结合CSS3的各种属性和技巧，来创建出丰富多彩的图形。...
这个"纯css3实现各种图形样式.zip"压缩包文件显然是一个包含了一系列利用CSS3技术制作的各种图形样式的资源集合。下面我们将详细探讨CSS3在创建图形样式方面的应用。 首先，CSS3引入了许多新的选择器，使得我们可以...
本教程将深入探讨如何利用CSS3来绘制各种图形图标，并实现丰富的样式特效，从而实现无需依赖任何图片资源的高效设计。 一、CSS3基本图形绘制 1. `border-radius`属性：通过设置边框半径，我们可以创建圆形或椭圆形...
在“卡通星球行星CSS3图形特效”这个主题中，我们将深入探讨如何使用CSS3来创建出独特且吸引人的行星图形，尤其是那些带有玻璃透明质感的卡通星球。 首先，让我们了解CSS3中的关键特性在创建此类特效中的应用： 1....
【标题】"纯CSS3几何多边形图形动画特效.zip" 涉及的主要知识点是CSS3中的图形绘制和动画效果。CSS3是层叠样式表的第三个版本，相较于CSS2，它引入了许多新的特性，使得网页设计变得更加丰富多彩。在这个项目中，...
本话题主要聚焦于使用CSS3来绘制各种图形和图标，这是一种高效且灵活的方法，可以替代传统的图像资源，减少页面加载时间，并有利于响应式设计。 首先，CSS3中的`border-radius`属性可以用来创建圆形或椭圆形，例如...
本资源"纯CSS3绘制各种不规则图形图标样式特效源码.zip"正是利用了CSS3的这些新特性，提供了一套不依赖于图片或JavaScript的图形绘制方案。 一、CSS3的边框与背景 在CSS3中，边框和背景的处理方式大大增强。例如，...
这个资源对于想要学习或者探索CSS3图形绘制潜力的前端开发者来说极具价值。CSS3是层叠样式表的最新版本，它引入了许多新特性，如选择器、动画、过渡和3D变换，使得网页设计更加丰富和动态。 【描述】提到的是这个...
【标题】"纯CSS3几何图形上升动画特效.zip"揭示了这个压缩包包含的内容是使用CSS3技术实现的几何图形动画效果，特别是图形在屏幕上上升的动态视觉展示。CSS3是层叠样式表的第三版，它引入了许多新的功能和改进，如...
【标题】中的“纯CSS3绘制的甜甜圈饼干卡通效果源码”表明这是一个利用CSS3技术实现的动画效果，主要用于创建具有甜甜圈和饼干外观的卡通图形。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了...
"CSS3绘制各种图形图标样式特效"的主题，正是利用了CSS3的这一特性，帮助开发者实现无需依赖图片就能创建出栩栩如生的图形和图标效果。 首先，CSS3的边框属性（border-radius）是创建圆角图形的基础，通过调整边框...
2. **CSS3图形绘制**：使用CSS3的`border-radius`创建圆角，`box-shadow`创建阴影效果，以及可能的`linear-gradient`和`radial-gradient`来制作筷子的质感和高光。 3. **CSS3变换（Transforms）**：通过`translate`...
是利用CSS代码方便的写出各种图形的汇总，制作手机页面时十分方便，因为没有兼容性问题
【标题】"纯css3绘制的360浏览器标志样式效果源码.zip"涉及的核心知识点是CSS3，尤其是其中的图形绘制技术。CSS3作为现代网页设计的重要工具，提供了丰富的功能，让开发者能够通过纯CSS代码创建出复杂的图形和动画...
"css3绘图制作css3响应式组织架构图形代码"这一主题，主要探讨的是如何利用CSS3的特性来创建动态、适应不同设备屏幕尺寸的组织架构图。下面我们将深入探讨这一话题，详细介绍相关的CSS3技术。 首先，组织架构图是一...
1. **纯CSS3图形化复选框**：CSS3引入了伪元素（`:before` 和 `:after`）和伪类（`:checked`），允许我们用自定义的图形替换默认的复选框样式。通过设置`content`、`width`、`height`、`border`等属性，可以创造出...