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元素.任何类型 ...
随机推荐
- C#8.0中新特性之一:结构readonly成员
结构struct成员支持readonly,用来限制被其修饰的成员不会改变结构的内部状态.加上7.2版本添加的readonly struct和ref readonly方法返回以及之前的字段声明修饰作用, ...
- 前后端分离crud(跨域问题)讲解
1 前后端分离 1.1 后端 ssm+maven 多模块 swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511. ...
- c++-多态的练习
多态的几个小练习 练习一 #include <iostream> #include <string> using namespace std; class Fu { publi ...
- 如何入侵SF服务器/充当GM刷元宝
首要作者本人要声明一下,写下此文章技术不是教你去黑传奇SF,只是想以本文引起4F拥有者的留意方案,哈哈. 如何入侵传奇SF刷元宝,首先要温故下自己的专业技术水平. 我也非常喜欢玩游戏,但却玩得特别菜, ...
- Java 商户管理系统 客户管理 库存管理 销售报表 SSM项目源码
系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM ...
- 秒杀系统(一)----环境搭建及集成Mybatis、Redis
1.1 环境搭建--pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...
- gitlab如何从Github导入项目
本文简单演示如何Github上导入项目到私人搭建的Gitlab中,搭建过程参考:CentOS7 搭建gitlab服务器. Gitlab版本是gitlab-ce-12.0.2,界面可能稍有差异,但应该影 ...
- Appium+Java 自动化测试系列一:环境搭建
Appium+Java 自动化测试框架搭建主要分为以下几个方面的下载安装及环境配置 1.Java开发环境 涉及到的内容又jdk.编译器工具(推荐jdk 1.8.Eclipse编译器或者IDEA编译工具 ...
- Prometheus学习系列(七)之Prometheus PromQL说明
前言 本文来自Prometheus官网手册1.2.3 和 Prometheus简介1.2.3 PromQL操作符 一.二元操作符 Prometheus的查询语言支持基本的逻辑运算和算术运算.对于两个瞬 ...
- PHP 字符串大全
PHP字符串函数是核心的一部分.无需安装即可使用这些函数 函数名称 描述 addcslashes 以 C 语言风格使用反斜线转义字符串中的字符 addslashes 使用反斜线引用字符串 bin2he ...