制作好看又非常简单CSS样式的颜色块
2015-08-25 18:49
666 查看
首先,在html建立一个div块
html文件如下
我现在想要的是一个高80px,宽80px,背景色是绿色(#33cd5f)的颜色块,于是
CSS文件内容如下
效果图:
那现在,我改变主意了
我要一个高300px,宽300px,同时距离左边有40px,juli颜色块是从粉色(#ff00ca)到棕黄色(ccd9400)的渐变
CSS文件内容如下:
我看了看,觉得这个色块不够好看
于是我让它的边缘稍微有点弧度,就弄个20px
还是觉得不够好看,于是给它加了10px的蓝色边框
在这个学习中,我发现了,当边框宽度越来越大,内部的弧度将会越来越小,最后成为一个正方形,这里我给定的边框宽度是30px
html文件如下
<div class="color-lump"></div>
我现在想要的是一个高80px,宽80px,背景色是绿色(#33cd5f)的颜色块,于是
CSS文件内容如下
.color-lump{ width: 80px; height: 80px; background-color: #33cd5f; }
效果图:
那现在,我改变主意了
我要一个高300px,宽300px,同时距离左边有40px,juli颜色块是从粉色(#ff00ca)到棕黄色(ccd9400)的渐变
CSS文件内容如下:
.color-lump{ width: 300px; height: 300px; margin-top:80px; margin-left: 40px; background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400)); }
我看了看,觉得这个色块不够好看
于是我让它的边缘稍微有点弧度,就弄个20px
还是觉得不够好看,于是给它加了10px的蓝色边框
.color-lump{ margin-top: 60px; width: 300px; height: 300px; margin-left: 40px; border: 10px solid rgb(0,162, 233); border-radius: 20px; background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400)); }效果如下:
在这个学习中,我发现了,当边框宽度越来越大,内部的弧度将会越来越小,最后成为一个正方形,这里我给定的边框宽度是30px
.color-lump{ margin-top: 60px; width: 300px; height: 300px; margin-left: 40px; border: 30px solid rgb(<span style="font-family: Arial, Helvetica, sans-serif;">0,162, 233</span><span style="font-family: Arial, Helvetica, sans-serif;">);</span> border-radius: 20px; background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400)); }效果如下:
相关文章推荐
- css知多少(6)——选择器的优先级
- css selector: xpath:
- css selector: xpath:
- 关于单选框以及复选框的css美化方法
- 当内嵌图层有图层样式时,如何在其上边创建图层剪切蒙版
- css中的float和相对定位,绝对定位,z-index
- Css font-family字体对照表
- 适度使用禁止复制css样式的好处
- CSS中border和clear两大属性用法揭秘
- DIV背景透明样式使用
- css知多少(5)——选择器
- css知多少(4)——解读浏览器默认样式
- css样式,层叠顺序属性z-index
- Silverlight渐变样式
- CSS100%布局小事例
- css知多少(3)——样式来源与层叠规则
- 博客园CSS代码
- CSS实现垂直居中
- css Reset
- CSS初始化设置