DIV CSS Border Tips_html/css_WEB-ITnose

DIV CSS Border Tips
If you set the upper, lower, left, and right borders of an object to the same style, you can abbreviate it without writing out the attributes and corresponding values ​​​​for the top, bottom, left, and right respectively.
For example, set the top, bottom, left and right borders to 1px width, solid line, black border CSS code as follows:
border:1px solid #000;

Complete DIV CSS example:
Instance content setting CSS For the css selector named yangshi, set the attribute selector style to a rectangle with a solid black border of 1px width, a width of 200px, and a height of 50px.
CSS code:

div,body{ border:0; margin:5px; padding:0;}/* Initialize web page style*/

 div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式 */
.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式 */

.yangshi{ border: 1px solid #000; width:200px; height:50px;}/* Set object style*/

Corresponding DIV code in HTML:

tr>

divcss5 example-CSS border example

 

divcss5实例-CSS 边框实例

www.divcss5.com CSS 实例

www.divcss5.com CSS example

The picture above is a screenshot of the main fragment code of the CSS border instance

Note: The above code corresponds to the display effect. The dotted lines other than the solid lines are seen because of the DW software A dotted line is automatically added to the DIV box area. In actual browsing, there is no such dotted line. Please note.

There are borders on three sides but no setting skills on one side
For example, there are borders on the left and right bottom and the style is a black 1PX width solid border, but there is no border on the top.
CSS code: border:1px solid #000; border-top:none;

Note that the order of border:1px solid #000; and border-top:none; cannot be interchanged. Because CSS reading has the principle of reading from top to bottom and from left to right, it makes no sense to set the entire border style first and then declare the top border to "none", that is, to achieve the style required by this instance. This eliminates the need to set the bottom, left, and right settings separately, thus saving a certain amount of code.

To summarize CSS borders, common attribute codes for setting CSS styles on objects are: border:1px solid #000;