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-xoffset-yblur-radiusspread-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---新月图形的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. 用css绘制图形

    巧用css的border-radius属性,也能绘制出好看的图形 html部分 <!DOCTYPE html><html> <head> <meta char ...

  3. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  4. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  5. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. css画图形

    博客:  史上最强大的40多个纯cs图形 问题:看了上面的博客思考简单的三角行是怎么形成的? #triangle-up { width: 0; height: 0; border-left: 50px ...

  7. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  8. CSS 不规则图形绘制

    基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...

  9. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

随机推荐

  1. C#8.0中新特性之一:结构readonly成员

    结构struct成员支持readonly,用来限制被其修饰的成员不会改变结构的内部状态.加上7.2版本添加的readonly struct和ref readonly方法返回以及之前的字段声明修饰作用, ...

  2. 前后端分离crud(跨域问题)讲解

    1 前后端分离 1.1 后端 ssm+maven 多模块 swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511. ...

  3. c++-多态的练习

    多态的几个小练习 练习一 #include <iostream> #include <string> using namespace std; class Fu { publi ...

  4. 如何入侵SF服务器/充当GM刷元宝

    首要作者本人要声明一下,写下此文章技术不是教你去黑传奇SF,只是想以本文引起4F拥有者的留意方案,哈哈. 如何入侵传奇SF刷元宝,首先要温故下自己的专业技术水平. 我也非常喜欢玩游戏,但却玩得特别菜, ...

  5. Java 商户管理系统 客户管理 库存管理 销售报表 SSM项目源码

    系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM ...

  6. 秒杀系统(一)----环境搭建及集成Mybatis、Redis

    1.1 环境搭建--pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  7. gitlab如何从Github导入项目

    本文简单演示如何Github上导入项目到私人搭建的Gitlab中,搭建过程参考:CentOS7 搭建gitlab服务器. Gitlab版本是gitlab-ce-12.0.2,界面可能稍有差异,但应该影 ...

  8. Appium+Java 自动化测试系列一:环境搭建

    Appium+Java 自动化测试框架搭建主要分为以下几个方面的下载安装及环境配置 1.Java开发环境 涉及到的内容又jdk.编译器工具(推荐jdk 1.8.Eclipse编译器或者IDEA编译工具 ...

  9. Prometheus学习系列(七)之Prometheus PromQL说明

    前言 本文来自Prometheus官网手册1.2.3 和 Prometheus简介1.2.3 PromQL操作符 一.二元操作符 Prometheus的查询语言支持基本的逻辑运算和算术运算.对于两个瞬 ...

  10. PHP 字符串大全

    PHP字符串函数是核心的一部分.无需安装即可使用这些函数 函数名称 描述 addcslashes 以 C 语言风格使用反斜线转义字符串中的字符 addslashes 使用反斜线引用字符串 bin2he ...