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

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

图一

图二

图三

  图四

 图五

 图六

图七                                                                                                      

 图八 

图九

 图十

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <title>Document</title>
  6.  </head>
  7.  <style>
  8.    div{
  9.    width: 170px;
  10.    height: 140px;
  11.    background-image:
  12.          radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
  13.          linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
  14.          radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
  15.          radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
  16.          radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
  17.          linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
  18.          border-radius: 140px 140px 80px 80px;
  19.  }
  20.  </style>
  21.  <body>
  22.  
  23.  <div></div>
  24.  </body>
  25.  </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. Android PagerAdapter

    本基类是ViewPager提供填充页面内容的适配器(数据与显示内容之间桥梁).通常,人们不是直接使用本基类的,而是使用这个基类的实现:FragmentPagerAdapter   或者Fragment ...

  2. C#中使用自定义的纸张大小

    using System.Drawing.Printing; using System.Drawing; private void Test() { PrintDocument m_pdoc = ne ...

  3. XML的SelectNodes使用方法以及XPath

    XPath 是 XML 的内容,这里 SelectNodes 是 C# 中 XmlDocument 或 XmlNode 的一个方法.SelectNodes 使用 XPath 来选取节点. 重要语法 S ...

  4. 我的iOS开发之路

    我终于开始写我的第一个cocos2d-iphone程序了.纪念一下 额,这是一个悲伤的故事.其实我从开始准备开发iOS已经好久了,从我装上Xcode开始到现在,应该已经有差不多一年的时间了把. 还记得 ...

  5. linux中cron用法

    http://blog.chinaunix.net/uid-677314-id-83387.html

  6. 【ACM/ICPC2013】POJ基础图论题简析（一）

    前言:昨天contest4的惨败经历让我懂得要想在ACM领域拿到好成绩,必须要真正的下苦功夫,不能再浪了!暑假还有一半,还有时间!今天找了POJ的分类题库,做了简单题目类型中的图论专题,还剩下二分图和 ...

  7. Duff and Weight Lifting - 587A

    题目大意:某个人训练举重,他每次可以举起来2^wi的重量,不过这个人比较懒所以他想尽量减少训练的次数,如果所有的训练重量2^a1 +2^a2+....2^ak = 2^x,那么这些重量可以一次性训练( ...

  8. 关于python文件转为exe文件

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...

  9. FireMonkey 使用Webbrowser

    DELPHI XE5 源码PASCAL:http://files.cnblogs.com/xe2011/FireMonkey_Webbrowser.rar 为了这个用上webbrowser真是费太大劲 ...

  10. PHP扩展开发01:第一个扩展【转】

    我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...