FCC---Create a Graphic Using CSS---新月图形
By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape.
For this challenge you need to work with the box-shadow
property that sets the shadow of an element, along with the border-radius
property that controls the roundness of the element's corners.
You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.
In order to create a round object, the border-radius
property should be set to a value of 50%.
You may recall from an earlier challenge that the box-shadow
property takes values for offset-x
, offset-y
, blur-radius
, spread-radius
and a color value in that order. The blur-radius
and spread-radius
values are optional.
原始代码下的图形如下:
练习题:
Manipulate the square element in the editor to create the moon shape.
First, change the background-color
to transparent, then set the border-radius
property to 50% to make the circular shape.
Finally, change the box-shadow
property to set the offset-x
to 25px, the offset-y
to 10px, blur-radius
to 0, spread-radius
to 0, and color to blue.
- 先把蓝色的背景调成透明
- 再调整后面绿色box-shadow阴影的边界半径,到50%
- 最后是微调box-shadow,之前做过关于这个的练习,做过我都已经忘记了,所以自己调了下不同值的看了下效果。基本就是把新月的颜色从绿色改到蓝色,边缘模糊的变锐化了,以后遇到再细看吧
练习代码:
<style>
.center {
position: absolute;
margin: auto;
top: ;
right: ;
bottom: ;
left: ;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: %;
box-shadow: 25px 10px blue;
} </style>
<div class="center"></div>
效果:
FCC---Create a Graphic Using CSS---新月图形的更多相关文章
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 用css绘制图形
巧用css的border-radius属性,也能绘制出好看的图形 html部分 <!DOCTYPE html><html> <head> <meta char ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css画图形
博客: 史上最强大的40多个纯cs图形 问题:看了上面的博客思考简单的三角行是怎么形成的? #triangle-up { width: 0; height: 0; border-left: 50px ...
- CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
随机推荐
- OpenWrite一款博客可一文多发的实用工具
前言 许多网友想看一文多发的OpenWrite,今天,它来了!别问落地价,因为内测无价! 这款实用工具,可支持十大博客平台一键发布,是博主们的发文神器 你看它多种平台.一键管理.后台界面优雅.还有签到 ...
- JS--- part6课程介绍 & part5复习
part6 课程介绍 scroll系列:-----重点,每个属性是什么意思 封装scroll系列的相关的属性,固定导航栏案例---事件浏览器的滚动条事件--能够写出来 封装动画函数---缓动动画--- ...
- JS---DOM---事件冒泡和阻止事件冒泡,总结事件
事件冒泡: 多个元素嵌套, 有层次关系 ,这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了 事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件 ...
- IT兄弟连 HTML5教程 CSS3属性特效 遮罩
CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.遮罩有三个属性可以设置,分别是mask-image.mask-position ...
- Linux日志中如何查找关键字及其前后的信息
在日常工作中,我们经常需要查看日志,比如可以通过 tail 命令实时查看日志,也可以通过 cat 等命令查看日志信息. 但现在我们要讨论的是,如何从日志中通过关键字过滤出我们想要的内容,方法有多种,今 ...
- SpringCloud Zuul2.X网关实现服务熔断降级(复制即用)
版本: <properties> <spring-boot.version>.RELEASE</spring-boot.version> <spring-cl ...
- 精通awk系列(15):awk数据类型和字面量
回到: Linux系列文章 Shell系列文章 Awk系列文章 数据类型 gawk有两种基本的数据类型:数值和字符串.在gawk 4.2.0版本中,还支持第三种基本的数据类型:正则表达式类型. 数据是 ...
- 每天3分钟操作系统修炼秘籍(6):Idle进程
点我查看秘籍连载 CPU的归属:Idle进程 操作系统并不总是繁忙.例如个人PC上任务比较轻,多数时候都无法充分利用CPU,导致CPU处于空闲状态.但CPU既然通电了,它就得运行,那么在它没有任务需要 ...
- 剑指offer笔记面试题4----二维数组中的查找
题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 测试用例: 二维数组中包含 ...
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...