CSS를 통해 이미지에 테두리를 설정하는 방법 HTML에서는 a1f02c36ba31691bcfe87b2722de723b 태그의 border 속성 값을 통해 이미지에 테두리를 추가합니다. border 속성, border-style은 점선, 실선, 점선 등 테두리의 스타일을 정의합니다.
HTML은 이미지의 테두리를 설정합니다
HTML에서 a1f02c36ba31691bcfe87b2722de723b 태그의 테두리 속성 값은 테두리의 두께를 조절하기 위해 이미지에 테두리를 추가합니다. 값이 0이면 테두리가 없음을 의미합니다.
<span style="font-size:24px;"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="1"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="2"> </span>
코드는 위와 같습니다. 테두리가 모두 검은색이고, 스타일이 매우 단조롭고, 테두리의 굵기만 조정할 수 있습니다. .
CSS는 이미지의 테두리를 설정합니다
Dreamweaver의 구문 팁을 사용하면 다양한 정보를 쉽게 얻을 수 있습니다. 테두리 스타일의 값입니다.
border-color를 통해 테두리의 색상을 정의하고, border-width를 통해 테두리의 두께를 정의할 수 있습니다.
<html> <span style="font-size:24px;"> <head> <title> 边框 </title> <style> <!-- img.test1{ border-style:dotted; border-color:#FF9900; border-width:5px; } img.test2{ border-style:dashed; border-color:blue; border-width:2px; } --> </style> </head> <body> <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1"> <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2"> </body> </span> </html>
코드는 위와 같습니다. 첫 번째 사진의 효과는 황금색 노란색, 너비 5픽셀의 점선이고 두 번째 그림은 파란색, 너비 2픽셀입니다. 점선.
CSS에서는 border-left, border-right, border-top 및 border-bottom의 네 가지 테두리 스타일을 설정할 수 있습니다.
<html> <span style="font-size:24px;"> <head> <title> 分别设置4个边框 </title> <style> <!-- img{ border-left-style:dotted; border-left-color:#FF9900; border-left-width:5px; border-right-style:dashed; border-right-clolr:#33CC33; border-right-width:2px; border-top-style:solid; border-top-color:#CC00FF; border-top-width:10xp; border-bottom-style:groove; border-bottom-color:#666666; border-bottom-width:15px; } --> </style> </head> <body> <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0""> </body> </span> </html>
코드는 위와 같으며, 이미지의 네 가지 테두리에 대해 서로 다른 스타일을 설정합니다. 이 방법은 다른 많은 HTML 요소에서도 자주 사용됩니다.
Border 속성을 사용하면 각 값을 동일한 문에 공백으로 구분하여 쓸 수도 있으므로 코드 길이를 크게 줄일 수 있습니다.
<html> <span style="font-size:24px;"> <head> <title> 合并各CSS值 </title> <style> <!-- img.test1{ border:5px double #FF00FF; } img.test2{ border-right:5px double #FF00FF; border-left:8px solid #0033FF; } --> </style> </head> <body> <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1"> <img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2"> </body> </span> </html>
이렇게 하면 웹페이지의 다운로드 속도가 빨라지고 더 명확하고 읽기 쉬워집니다.
또한 각 속성 값을 함께 쓸 수 있는 테두리 속성 외에도 글꼴, 여백, 등 CSS의 다른 많은 속성도 유사한 작업을 수행할 수 있습니다. padding 등 속성을 통일할 수 있습니다.
<span style="font-size:24px;"> p{ font:italic bold 30px Arial,Helvetica,sans-serif; padding:0px 5px 0px 3px; } </span>
관련 권장 사항:
CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예: )
위 내용은 CSS 테두리 속성을 통해 이미지에 테두리 효과를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!