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揭秘(三)形状的更多相关文章

  1. [css 揭秘]:CSS揭秘 技巧(三):背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  2. 03--css形状--css揭秘

    形状 一 自适应的椭圆 1.难题 1> 圆 你可能注意到过, 给任何正方形元素设置一个足够大的border-radius, 就可以把它变成一个圆形.所用到的CSS 代码如下所示: #bd { w ...

  3. CSS揭秘—灵活的背景图(三)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  4. css 揭秘-读书笔记

    css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...

  5. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  6. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  7. [css 揭秘]:CSS揭秘 技巧(四):边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  8. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  9. 《CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化

    本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...

  10. [css 揭秘]-css coding tips

    css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...

随机推荐

  1. Zabbix JMX之tomcat监控

    工作原理: 1.JAVA-GATEWAY  Zabbix本身不支持直接监控Java,在zabbix 1.8以前,只能使用Zapcat来做代理监控,而且要修改源代码,非常麻烦.所有后来为了解决这个监控问 ...

  2. Web前端有价值的博客文章汇总

    一.HTML 二.CSS 1.深入理解position和z-index属性 :https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 2.BFC(清除 ...

  3. c#抽取pdf文档标题——前言

    由于工作的需要,研究c#抽取pdf文档标题有3个月了.这项工作是一项"伟大而艰巨"的任务.应该是我目前研究工作中最长的一次.我觉得在长时间忙碌后,应该找些时间,把自己的心路历程归纳 ...

  4. 微信小程序基于腾讯云对象存储的图片上传

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...

  5. nodejs-url网址解析的好帮手

    HTTP协议中url和uri的区别. 每个url都是uri,但是不是每个uri都是url. URI:是统一资源的标识符,web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个URI来定位 ...

  6. EventBus VS Spring Event

    EventBus VS Spring Event 本地异步处理,采用事件机制 可以使 代码解耦,更易读.事件机制实现模式是 观察者模式(或发布订阅模式),主要分为三部分:发布者.监听者.事件. Gua ...

  7. 记录使用CI框架开发项目时遇到的问题

    关于CI框架在视图文件中怎样引入静态资源文件(js,css,images)的问题: 第一步:在application/config/config.php文件中配置  $config['base_url ...

  8. Python基础-week04

    本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...

  9. bootbox的使用

    /* * className为green的方法 */ function alertMsgG(msg,title,fn){ bootbox.alert({ buttons: { ok: { label: ...

  10. 00_Linux介绍_我的Linux之路

    原文章发布于特克斯博客www.susmote.com 什么是操作系统 操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机& ...