Home > Web Front-end > CSS Tutorial > How to create a new box with a solid border and a red box

How to create a new box with a solid border and a red box

云罗郡主
Release: 2018-11-14 16:18:55
forward
3718 people have browsed it

The content of this article is about how to create a new box with a solid border and a red box. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Create a new red box with a solid border, a DIV CSS instance, and use the editor software to create a new red border object instance. [Recommended reading: How to add border style to css table? Summary of css table border styles (with complete examples )】

In order to observe the effect, set a css height and css width style for the box, and assign a red css border style. At the same time, for the sake of compatibility, DW software is still used to create this instance.

Instance description, we name this instance css ".php1" and use class reference in html. The css width is 380px, the css height is 200px, and there is a solid border with a border width of 2px.

Border basic syntax:

Border: border Enter the css border tutorial

The complete example HTML code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>新建边框实例</title> 
<style> 
.php1{ width:380px; height:200px; border:2px solid #F00} 
</style> 
</head> 
<body> 
<div class="php1">我宽度为380px 高度200px 边框2px红色</div> 
</body> 
</html>
Copy after login

The preview is as follows:

How to create a new box with a solid border and a red box

The above is the complete introduction on how to create a new box with a solid border and a red box. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.


The above is the detailed content of How to create a new box with a solid border and a red box. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:divcss5.com
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