今天写了几个css属性
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border-width: 1px 10px 30px;
border-style: solid;
border-color: #999;
}
#d2{
border-width: 4px;
border-style: double;
}
#d3{
border-width: 1px;
border-style: dotted;
}
#d4{
border-width: 1px;
border-style: dashed;
}
#d5{
border-width: 4px;
border-style: groove;
}
#d6{
border-width: 4px;
border-style: ridge;
}
#d7{
border-width: 4px;
border-style: inset;
}
#d8{
border-width: 8px;
border-style: outset;
}
#d9{
border: 1px solid #ffaa00;
}
#d10{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #f00;
border-right: 1px solid #0f0;
}
div.trans{
border: 10px solid transparent;
}
body{
/*background-color: #afa;*/
}
*{
margin: 0;
padding: 0;
}
input{
border: 0.5px solid #A9A9A9;
}
input:focus{
outline: #A5C7FE solid 1px;
}
</style>
</head>
<body>
<div id="d1">商品评论区</div><br/>
<div id="d2">商品评论区</div><br/>
<div id="d3">商品评论区</div><br/>
<div id="d4">商品评论区</div><br/>
<div id="d5">商品评论区</div><br/>
<div id="d6">商品评论区</div><br/>
<div id="d7">商品评论区</div><br/>
<div id="d8">商品评论区</div><br/>
<div id="d9">商品评论区</div><br/>
<div id="d10">商品评论区</div><br/>
<div class="trans">一个区块</div>
<div class="trans">二个区块</div>
<br/>
<input />
ABCDEFG
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border: 1px solid #888;
border-radius: 0px 5px;
}
#d2{
width: 300px;
height: 200px;
border: 1px solid #888;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">商品的评论内容</div><br/>
<div id="d2">商品的评论内容</div><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: -10px -10px;
}
#d2{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 10px -10px;
}
#d3{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px #999;
}
#d4{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px 5px #999;
}
#d5{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px 5px 10px #999;
}
#d5{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 2px 2px #999 inset;
}
input{
border: 1px solid #666;
box-shadow: 2px 2px #aaa inset;
}
</style>
</head>
<body>
<br/>
<div id="d1">一个区块</div><br/>
<div id="d2">一个区块</div><br/>
<div id="d3">一个区块</div><br/>
<div id="d4">一个区块</div><br/>
<div id="d5">一个区块</div><br/>
<div id="d6">一个区块</div><br/>
ABCDEFG
<br/>
<input />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
width: 200px;
height: 100px;
border: 10px solid #aaa;
padding: 15px;
margin: 20px;
}
#d2{
margin-top: 30px;
}
#d3{
}
</style>
</head>
<body>
<div id="d1">盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容</div>
<div id="d2">第二个盒子</div>
<hr/>
<div id="d3">第三个盒子</div>
<div id="d4">第四个盒子</div>
</body>
</html>
今天写了几个css属性的更多相关文章
- Discuzx系统 CSS 编码规范，CSS属性书写顺序
1. 属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 2. 属性的书写顺序: ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- 如何写出优雅的CSS代码 ？(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ？
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- css学习（2）-- 常见的CSS属性和值
1.CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
- 那些年我们错过的超级好用的CSS属性
在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- css 属性
部分属性在firefox 中添加-moz- safari 以及chrome 加上-webkit- opera 加上-o- ie9里可能需要-ms- jquery 中的css 操作 和一般的cs ...
随机推荐
- python challenge第1关--NoteBook上的“乱码”
在 python challenge第0关中已经得到第1关的地址了: http://www.pythonchallenge.com/pc/def/map.html 一.观察地址栏和标签: What a ...
- HDU 1150 Machine Schedule (二分图最小点覆盖)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 有两个机器a和b,分别有n个模式和m个模式.下面有k个任务,每个任务需要a的一个模式或者b的一个 ...
- Educational Codeforces Round 5 - C. The Labyrinth (dfs联通块操作)
题目链接:http://codeforces.com/contest/616/problem/C 题意就是 给你一个n行m列的图,让你求’*‘这个元素上下左右相连的连续的’.‘有多少(本身也算一个), ...
- HDU 4462 Scaring the Birds （暴力求解，二进制法）
题意:给定一个 n*n的矩阵,在一些位置放上稻草人,每个稻草人的范围是一定,问你最少几个能覆盖整个矩阵. 析:稻草人最多才10个,所以考虑暴力,然后利用二进制法,很容易求解,并且时间很少0ms,注意有 ...
- ListCtrl控件的使用
list contrl控件的使用 .建立基于对话框的应用程序,布置界面,设置属性. 注意添加的是listctrl控件,不是listbox控件,在控件工具箱的倒数第五行list control控件. 属 ...
- 本地搜索神器-Everything
现在硬盘越来越大了,经常机器上一堆资料,要找的时候,无论是XP还是Win7,都要搜索半天. 如果使用Everything,可以大大的加快这个过程. 具体的评价请看http://www.appinn.c ...
- java 分页
ListAction.java package com.sy.action; import java.util.List; import com.opensymphony.xwork2.ActionS ...
- Line去年营收超5亿美元 远超竞争对手WhatsApp
原文地址: http://news.cnblogs.com/n/206072/ 凭借着修改表情取悦国际用户的做法,日本移动消息应用 Line 在全球的用户总数已经超过 4 亿.Line.微信.What ...
- cocos2dx 3.0 触摸机制
在cocos2dx 3.0版本号中,废弃了以往2.x版本号的写法,我们先来看一下Layer.h中的一段代码 /* Callback function should not be deprecated, ...
- Codeforces Round #327 (Div. 2) D. Chip 'n Dale Rescue Rangers 二分 物理
D. Chip 'n Dale Rescue Rangers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/co ...