表格边框田字格边框css_CSS中的边框

最新推荐文章于 2022-07-05 08:03:01 发布

cumt30111

最新推荐文章于 2022-07-05 08:03:01 发布

阅读量493

点赞数

文章标签： css html css3 opencv python

原文链接：https://www.includehelp.com/code-snippets/borders-in-css.aspx

版权

表格边框田字格边框css

CSS边框属性 (CSS border property)

The border properties are used for specifying the style, width, and color of an element's border.

border属性用于指定元素边框的样式，宽度和颜色。

Syntax:

句法：

    Element{
        border: border-width border-style border-color;
    }

Now let's get into border deeper and learn about different things that we can do with the border property.

现在让我们更深入地了解Border，并了解我们可以使用border属性进行的不同操作。

边界半径属性 (border-radius property)

The border-radius property is used to change the shape of the box. Every corner of an element can have two values, for the vertical and horizontal radius of that corner.

border-radius属性用于更改框的形状。元素的每个角可以具有两个值，分别是该角的垂直和水平半径。

The first set of values defines the horizontal radius. The second set of values defines the vertical radius. If only one set of values is supplied, it is used for both the vertical and horizontal radius.

第一组值定义水平半径。第二组值定义垂直半径。如果仅提供一组值，则将其用于垂直和水平半径。

Example:

例：

The following shorthand allows you to set the horizontal and vertical radius of every corner to the same value,

以下速记允许您将每个角的水平和垂直半径设置为相同的值，

<!DOCTYPE html>

<head>
    <style>
        p {
            width: 250px;
            height: 250px;
            background-color: #0000ee;
            border-radius: 10px;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome to include help</p>
</body>

</html>

Output

输出量

This code would create a border of the radius of 10px around the output.

此代码将在输出周围创建半径为10px的边框。

边框样式的属性 (border-style property)

The border-style property is used to set the style of an element's border.

border-style属性用于设置元素边框的样式。

It can also have the values none and hidden.

它还可以具有值none和隐藏。

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            border-style: dotted solid double dashed;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome To Include Help</p>
</body>

</html>

Output

输出量

边框(简写) (Border (shorthands))

Most of the time you want to define more than one border property (such as border-width, border-style and border-color) for every side of an element.

大多数时候，您想为元素的每一侧定义一个以上的border属性 (例如border-width ， border-style和border-color )。

Instead of writing:

而不是写：

    border-width: 1px;
    border-style: solid;
    border-color: #000;

You can write:

你可以写：

    border: 1px solid #000;

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            border: 6px dotted #000;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome To Include Help</p>
</body>

</html>

Output

输出量

These shorthands are used for every side of an element: border-top, border-left, border-right and border-bottom.

这些速记用于元素的每一面： border-top ， border-left ， border-right和border-bottom 。

边框图像属性 (border-image property)

The border-image property is used to set an image to be used instead of normal border styles.

border-image属性用于设置要使用的图像，而不是普通的边框样式。

A border-image essentially consists of a,

边框图像本质上由一个，

border-image-source: The path of the image to be used.
border-image-source ：要使用的图像的路径。
border-image-slice: Specifies the offset that is used to divide the image into nine regions (four corners, four edges, and a middle).
border-image-slice ：指定用于将图像分为九个区域(四个角，四个边缘和一个中间)的偏移量。
border-image-repeat: Specifies how the images for the sides and the middle of the border-image are scaled.
border-image-repeat ：指定如何缩放边框图像的侧面和中间的图像。

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 stretch;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome To Include Help</p>
</body>

</html>

Output

输出量

The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners of the border while the side will be used in between.

图像将被分成9个30x30像素的区域。边缘将用作边框的角，而侧面将用作边缘。

border- [left | right | top | bottom]属性 (border-[left|right|top|bottom] property)

The border-[left|right|top|bottom] property is used to add a border to a specific side of an element.

border- [left | right | top | bottom]属性用于在元素的特定边添加边框。

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            border-left: 1px solid black;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome To Include Help</p>
</body>

</html>

Output

输出量

This above code would have a 1px solid black border on the left of the output. If you wanted to add a border to the left side of an element, you could do this.

上面的代码在输出的左侧将有一个1px的纯黑色边框。如果要在元素的左侧添加边框，可以执行此操作。

翻译自: https://www.includehelp.com/code-snippets/borders-in-css.aspx

表格边框田字格边框css

cumt30111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格边框田字格边框css_CSS中的边框

表格边框田字格边框css CSS边框属性 (CSS border property)The border properties are used for specifying the style, width, and color of an element's border. border属性用于指定元素边框的样式，宽度和颜色。 Syntax: 句法： Element{...
复制链接

扫一扫