CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。
- 35个让人惊讶的 CSS3 动画效果演示
- Web 前沿:一组极其绚丽的 CSS3 效果
- Web 前沿:那些让人惊叹的 CSS3 应用
- 十款精心挑选的在线 CSS3 代码生成工具
- 年度盛宴:2012年最精彩的 CSS3 教程
Square
#square {width: 100px;height: 100px;background: red;
}
Rectangle
#rectangle {width: 200px;height: 100px;background: red;
}
Circle
#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;
}/* Cleaner, but slightly less support: use "50%" as value */
Oval
#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;
}/* Cleaner, but slightly less support: use "50%" as value */
Trapezoid
#trapezoid {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px;
}
Parallelogram
#parallelogram {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red;
}
- CSS3 在网页设计中的20佳惊艳应用
- 推荐12个漂亮的 CSS3 按钮实现方案
- 推荐10个非常优秀的 CSS3 开发工具
- 分享50个漂亮的 CSS3 最佳应用示例
- 24款非常实用的 CSS3 工具终极收藏
本文链接:CSS 魔法系列:CSS 绘制基本图形(圆、椭圆等)
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
转载于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes.html
CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)相关推荐
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- [css] 怎样用纯CSS实现禁止鼠标点击事件?
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
- html图片倒角,CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...
- 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码 这是前端开发博客的正文 点击展开全文 将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
最新文章
- 昆虫基因组DNA的优化提取,可进行长读测序
- python3精要(55)-模块,私有方法
- CentOS 7 源码编译MariaDB 5.5.46
- 台大李宏毅Machine Learning 2017Fall学习笔记 (9)Keras
- Default Folder X 5 for Mac(文件快捷访问工具)
- FRR BGP协议分析17 -- labeled-unicast
- Python basemap模拟导弹发射
- java 二分查找法和顺序查找法的效率比较
- 计算机基础知识试题分值,计算机考试题分值分布.doc
- 任正非表示华为可以向美国企业转让5G技术;谷歌同意支付5亿欧元买断与法国纠纷;京东公布iPhone11系列预售战报……...
- MySQL入门系列:MySQL数据类型
- 公共关系礼仪实务章节测试题——公共关系的类型(六)
- 线下WINDOWS主机挂载华为云存储
- zbb20171223 vm12 Vmware虚拟机设置静态IP地址
- 安装centos7遇到问题记录:nouveau xxx unknown chipset
- 读书笔记之计算机体系结构
- 让人和猪都很感动的广告
- 腰椎间盘突出的意外之旅以及自己的治疗恢复经历
- Regular Expression Simplificator
- 10年跳槽7次,过来人告诉你有效跳槽和无效跳槽的区别
热门文章
- sdut-1117 C语言实验——求绝对值(选择结构)
- pascal--生成Pascal矩阵
- 【简明教程】windows下xgboost安装到python
- [简单题]Counting Duplicates( Python 实现)
- oracle hash join outer,CSS_浅谈Oracle中的三种Join方法,基本概念
Nested loop join:
Outer - phpStudy...
- linux node 文件存放目录_Linux文件与目录结构
- Hadoop记录-监控几个思路
- MongoDB复制集与Raft协议异同点分析
- 推荐一个妹子,播报汽车新闻
- 图解opengl 3D 图形绘制实例