Home > Web Front-end > HTML Tutorial > DIV CSS Border Tips_html/css_WEB-ITnose

DIV CSS Border Tips_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:31:59
Original
1552 people have browsed it

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;
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template