CSS3의 테두리 속성을 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-03-21 16:47:22
원래의
1468명이 탐색했습니다.

이번에는 CSS3 테두리 속성을 사용하는 방법을 알려드리겠습니다. css3 테두리 속성을 사용할 때 주의사항은 무엇인가요?

CSS3의 테두리. 이것은 우리에게 몇 번이나 낯설지 않습니다. border:1px solid red... 그러면 CSS3가 우리에게 어떤 놀라움을 가져다 줄까요?

CSS3에서는 테두리에 4가지 새로운 기능이 있습니다

1.Border-color(테두리 색상 설정)

2.Border-image(이미지를 통해 테두리로 설정)

3.Border -radius (테두리 반경)

4.box-shadow (그림자 효과)

내가 사용하는 브라우저 버전은 IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50입니다. . . 기본적으로 최신 버전입니다.

이전에는 p에 테두리를 추가하고 싶을 때 다음과 같이 작성했습니다.

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red;    
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>常用的边框样式</p>
</body>
</html>
로그인 후 복사

border-color

이미 테두리 색상을 설정할 수 있으니 왜 그럴까요? 테두리 색상은 어떻습니까? CSS3의 테두리가 다르기 때문입니다.

테두리 너비를 X로 설정한 경우 테두리 색상을 사용하세요. 그런 다음 이 테두리에 X 색상을 사용할 수 있습니다. 각 색상은 너비가 1px입니다. (ps: 테두리 너비가 10px이고 5개 색상만 설정한 경우 마지막 색상이 아래의 나머지 너비를 채웁니다.)

다음을 참조하세요. 구체적인 작성 방법은 아래 코드

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            border-color:red blue green black;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-color样式</p>
</body>
</html>
로그인 후 복사

근데 결과가 생각과 다릅니다.

위, 오른쪽, 아래, 왼쪽 4가지 색상에 해당하는 테두리만 봤습니다.

물론, 3가지 색상만 입력하면 중간 색상이 왼쪽과 오른쪽에 해당됩니다.

그럼 앞서 말씀드린 픽셀당 한 가지 색상의 효과는 어떨까요? "그러면 이 테두리에 X 색상을 사용할 수 있습니다." border-color는 4개 테두리 전체에 대한 것이므로 특정 테두리에 대한 것이 아닙니다.

위의 효과를 얻으려면 설정할 수 있습니다. 특정 국경에 대해.

  1. border-top-color

  2. border-right-color

  3. border-bottom-color

  4. border-left-color

그래서 코드를 변경해야 합니다.

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -moz-border-bottom-colors:Blue Yellow Red Black Green;
            -moz-border-right-colors:Blue Yellow Red Black Green;
            -moz-border-left-colors:Blue Yellow Red Black Green;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-color样式</p>
</body>
</html>
로그인 후 복사

실행한 후

효과가 있나요? ​​확실히 보이지는 않지만 각 픽셀에 색상이 있다는 것은 사실입니다. 그러면 그라데이션 색상을 만들 때 훨씬 편리합니다. 색상만 조정하면 됩니다. 알았어

.border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -ms-border-top-colors:Blue Yellow Red Black Green;
            -wekit-border-top-colors:Blue Yellow Red Black Green;
            -o-border-top-colors:Blue Yellow Red Black Green;
            border-top-colors:Blue Yellow Red Black Green;
        }
로그인 후 복사

하지만 효과는 Firefox에서만 나타나는 것으로 나타났습니다. 즉, border-border-colors 속성은 Firefox에서만 사용할 수 있으며 다른 속성은 호환되지 않습니다. 안타깝네요...

Border -image

border-image는 주로 그림을 사용하여 테두리를 채웁니다. 테두리의 배경 이미지 URL

border -image-slice는 위치 지정이 아닌 이미지 슬라이스 방법에 대한 속성을 설정합니다!

  1. border-image-width는 테두리 이미지 표시 영역을 정의합니다.

  2. border-image-repea

  3. 하나씩 분석해 보겠습니다.

  4. border-image-source

  5. 이것은 지정됩니다. 테두리 배경 이미지의 URL(예:
border-image-source :url(../images/border.gif);
로그인 후 복사

)은 없음, 즉 배경 이미지 없음

으로 설정할 수 있습니다.

border-image-slice

设置图片如何切割的属性,(重点理解)他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说

border-image-width

定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)

border-image-repeat;

repeat有三个值选择

[ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。)

好了,我们回头来看slice,也就是切割.= =说实话,不知道该怎么讲,还是上图吧.

                                       

左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.

left,top,right,bottom分别是你设置的距离,这一部分会被抽取出来作为边框.

top-left,  top-right, bottom-left, bottom-right同样会被抽取出来,与left,top,right,bottom不同的是,他们不会受repeat,stretch,round的影响.

而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?

下面看代码

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            -webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            display: block;
            
            border-width: 0 12px;
            padding: 10px;
            text-align: center;
            font-size: 16px;
            text-decoration: inherit;
            color:white;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-image样式</p>
</body>
</html>
로그인 후 복사

效果如下

 

用的材料图是

 

同样可惜的是,我这里只有FireFox和Safari出了效果,当然这也不能排序Chrome不能,因为听说有几个版本的可以。 

Border-radius

终于到圆角了,感觉花了那么多字去写css3有点怪,因为本来很简单的- -哈

border-radius

参数:半径,不可以是负数,为0的话是直角

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-radius:15px;
            -ms-border-radius:15px;
            -wekit-border-radius:15px;
            -o-border-radiuss:15px;
            border-radius:15px;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-radius样式</p>
</body>
</html>
로그인 후 복사

效果

 

圆角效果是比较常见的,而且在FireFox,Chrome,Safari,Opera都支持圆角效果,可惜IE还是只能回老家喝粥.不过据说IE9支持了。

相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

分别对应一个位置,需要注意的是,如果只有一个,会变成4分之1圆角,如果这4个里其中一个为0,那就回变成直角- -这个我也很纳闷.

box-shadow

最后一个,阴影

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-shadow样式</p>
</body>
</html>
로그인 후 복사

 

三个像素值和颜色分别是

阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

BFC模式详解

href와 src, link와 @import의 차이점은 무엇입니까

CSS에서 속성 값 상속을 사용하는 방법

위 내용은 CSS3의 테두리 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿