学css说起来应该有三天左右的时间的，加上之前了解的基础，对css有一点的感性认识了，相应代码有有比较好的把握，现在就通过分享几张照片的形式分享一下我的收获

备注：在Border的外边的部门被称作:outline区域

图一

图二

图三

  图四

 图五

 图六

图七                                                                                                      

 图八 

图九

 图十

备注：这个漂亮的玩意就是用css代码写出来的，好看吧？

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

 </head>

 <style>

   div{

   width: 170px;

   height: 140px;

   background-image:

         radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),

         linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),

         radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),

         radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),

         radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),

         linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);

         border-radius: 140px 140px 80px 80px;

 }

 </style>

 <body>

 <div></div>

 </body>

 </html>

学点css之经验总结篇章的更多相关文章

  1. 没学过CSS等前端的我，也想美化一下自己的博客

    随便说几句: 自己一直学的都是 C++和 Java 以及 Python语言,根本不懂高大上的 CSS 和 著名的 HTML5.感觉那些能自己设计那么漂亮的博客的朋友都好厉害.可以自己加上博客公告栏的小 ...

  2. 学点css基础

    中午时间学点css,附带http://www.w3cschool.cc/css/css-tutorial.html这个链接! 中午的时间学了这些东西!如下图: 附带代码: <!DOCTYPE h ...

  3. 零点起飞学HTML+CSS (顼宇峰) PDF扫描版

    零点起飞学HTML+CSS系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识.本书涉及面广,从 ...

  4. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  5. div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  6. 粉丝投稿！从2月份的面试被拒到如今的阿里P7，说一说自己学java以来的经验！

    个人近期面试情况 今年二月以来,我的面试除了一个用友的,基本其他都被毙了,可以说是非常残酷的.其中有很多自己觉得还面的不错的岗位,比如百度.跟谁学.好未来等公司.说实话,打击比较大. 情况基本上是从三 ...

  7. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  8. 学DIV+CSS技术,如何入门?(2)

    http://www.zhangbin.in/a/jishuziliao/CSSjishu/2014/0730/13267_2.html

  9. css解决方案经验杂记

    文本垂直居中 单行文本:line-height的值等于height: 多行文本:padding上下值一致即可: 还可以使用position:absolute进行绝对定位,如果是相对父级元素,则需要设置 ...

随机推荐

  1. RAC SCAN

    在介绍SCAN之前, 先简单的回顾一下ORACLE 关于IP 地址的命名用, 在9I RAC时, ORACLE没有自己的CLUSTERWARE, 主要依靠第三方的集群软件(如HACMP等), 客户端主 ...

  2. [转]用C#实现的条形码和二维码编码解码器

    条形码的标准: 条形码的标准有ENA条形码.UPC条形码.二五条形码.交叉二五条形码.库德巴条形码.三九条形码和128条形码等,而商品上最常使用的就是EAN商品条形码.EAN商品条形码亦称通用商品条形 ...

  3. Web---myAjax(自己写底层)-隐藏帧技术

    讲解网站一般都有的一个功能,就是注册时候的,实现验证用户名是否存在的功能. 源代码演示: reg.jsp: <%@ page language="java" import=& ...

  4. [codevs2152]滑雪

    题目来源 http://www.tyvj.cn/p/1004 http://www.luogu.org/problem/show?pid=1434# http://codevs.cn/problem/ ...

  5. [NOIP2011]数的划分

    本题地址:http://www.luogu.org/problem/show?pid=1025 题目描述 将整数n分成k份,且每份不能为空,任意两份不能相同(不考虑顺序).例如:n=7,k=3,下面三 ...

  6. javascript设计模式2

    接口:利 固化一部分代码 弊 丧失js的灵活性 在JavaScript中模仿接口 /* interface Composite{ function add(child); function remov ...

  7. Dumpbin的使用方法

    推荐:http://blog.csdn.net/blpluto/article/details/5706757

  8. PLSQL配置介绍

    PLSQL配置简介,优化   来自为知笔记(Wiz) 附件列表 s=selectf=FROMw=WHEREsf=SELECT * FROMdf=DELETE FROMsc=SELECT COUNT(* ...

  9. 【解决】Django下使用sqlite3的相关问题

    最近在玩Django,想用它写一个很小很小的项目,Django自带数据库sqlite3,本来项目也小,我就用它了. 玩意虽小,东西却不是那么好用的. 首先,在项目中建立模型,一个例子是这样的: cla ...

  10. Win8关机 一直重启的问题 解决方案-摘自网络

    win8关机时自动重启的解决方法:关闭快递启动,默认是启动的,到控制面板 – 电源选项 – 选择电源按钮的功能 – 更改当前不可用的设置 – 关机设置 – 把勾去掉 关闭快速启动.这样就不会关机一直重 ...