CSS揭秘(三)形状
Chapter 3
1. 椭圆
椭圆的实现主要依靠 border-radius 属性,该属性确定边框切圆角的半径大小,可以指定数值 px,也可以使用百分比显示
而且该属性非常灵活,四个角可以分别设置
width: 200px;
height:200px; //正方形
--------------------------------------------------------
border-radius:100px; //圆形
border-radius:50%/50%; //水平半径 / 垂直半径
--------------------------------------------------------
border-radius:50px/20px; //椭圆边角
--------------------------------------------------------
border-radius:50%/100% 100% 0 0 //半椭圆,底部垂直圆角为0时水平圆角也自动为0,无需再次指定
2. 平行四边形
平行四边形的实现依靠 transform:skew()实现,可以自己选择倾斜的方向X轴还是Y轴
要解决的问题是:如何在容器倾斜的情况下保持内容不变?
<a href="#yolo" class="button"><div>Click me</div></a>
---------------------------------------------------
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); } //文字设置反向倾斜以抵消容器带来的倾斜 .button {
display: inline-block;
padding: .5em 1em;
border:; margin: .5em;
background: #58a;
color: white;
text-transform: uppercase;
text-decoration: none;
font: bold 200%/1 sans-serif;
}
.button { //宿主元素
position: relative;
display: inline-block;
padding: .5em 1em;
border:; margin: .5em;
background: transparent;
color: white;
text-transform: uppercase;
text-decoration: none;
font: bold 200%/1 sans-serif;
} .button::before { //伪元素
content: ''; /* To generate the box */
position: absolute;
top:; right:; bottom:; left:;
z-index: -1;
background: #58a;
transform: skew(45deg);
} //想要变形元素而不变形内容可以使用
3. 简单的饼图
饼图实现有两种方式:渐变与SVG
渐变结合伪元素实现旋转,要注意超过50%之后要反转伪元素背景色;
通过这种方式还可以做动态旋转动画,用作加载进度的显示
<div class="pie"></div>
--------------------------------------------------------------------------------------------
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
transform:rotate(0.15turn); //设置旋转角度
}
SVG实现是先画圆和描边,然后在描边的下层再画一个更大的圆
虚线描边属性 stroke-dasharray 的第一个参数表示虚线长度,第二个为虚线之间的间隙长度
<svg width="100" height="100">
<circle r="25" cx="50" cy="50"/>
<svg>
------------------------------------------
svg {
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
} circle {
fill: yellowgreen;
stroke: #655;
stroke-width:; //该宽度为半径的两倍
stroke-dasharray:50 160; //第二个参数为周长
}
CSS揭秘(三)形状的更多相关文章
- [css 揭秘]:CSS揭秘 技巧(三):背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- 03--css形状--css揭秘
形状 一 自适应的椭圆 1.难题 1> 圆 你可能注意到过, 给任何正方形元素设置一个足够大的border-radius, 就可以把它变成一个圆形.所用到的CSS 代码如下所示: #bd { w ...
- CSS揭秘—灵活的背景图(三)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- [css 揭秘]:CSS揭秘 技巧(四):边框内圆角
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
- [css 揭秘]:CSS揭秘 技巧(一):半透明边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...
- 《CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化
本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...
- [css 揭秘]-css coding tips
css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...
随机推荐
- Zabbix JMX之tomcat监控
工作原理: 1.JAVA-GATEWAY Zabbix本身不支持直接监控Java,在zabbix 1.8以前,只能使用Zapcat来做代理监控,而且要修改源代码,非常麻烦.所有后来为了解决这个监控问 ...
- Web前端有价值的博客文章汇总
一.HTML 二.CSS 1.深入理解position和z-index属性 :https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 2.BFC(清除 ...
- c#抽取pdf文档标题——前言
由于工作的需要,研究c#抽取pdf文档标题有3个月了.这项工作是一项"伟大而艰巨"的任务.应该是我目前研究工作中最长的一次.我觉得在长时间忙碌后,应该找些时间,把自己的心路历程归纳 ...
- 微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
- nodejs-url网址解析的好帮手
HTTP协议中url和uri的区别. 每个url都是uri,但是不是每个uri都是url. URI:是统一资源的标识符,web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个URI来定位 ...
- EventBus VS Spring Event
EventBus VS Spring Event 本地异步处理,采用事件机制 可以使 代码解耦,更易读.事件机制实现模式是 观察者模式(或发布订阅模式),主要分为三部分:发布者.监听者.事件. Gua ...
- 记录使用CI框架开发项目时遇到的问题
关于CI框架在视图文件中怎样引入静态资源文件(js,css,images)的问题: 第一步:在application/config/config.php文件中配置 $config['base_url ...
- Python基础-week04
本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...
- bootbox的使用
/* * className为green的方法 */ function alertMsgG(msg,title,fn){ bootbox.alert({ buttons: { ok: { label: ...
- 00_Linux介绍_我的Linux之路
原文章发布于特克斯博客www.susmote.com 什么是操作系统 操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机& ...