08外枠に関するタグ
8390 ワード
外枠スタイル
border-style : none / dotted / dashed / solid /
double / groove / ridge / inset / outset;
枠線の厚さ
border[-위치]-width : 테두리 두께;
枠線の色
border[-위치]-color : 테두리 색상;
枠線スタイル、厚さ、色
border[-위치] : 두께 스타일 색상;
=> 색상 생략가능(생략시 글자색으로 통일)
エッジフィレット
border[-위아래][-좌우]-radius : 숫자값;
=> 위치 생략 시, 사방이 둥글게됨.
ボーダーシャドウ
box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상;
<style>
div{
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
}
#test1{
border-style: dotted;
border-width: 10px;
border-color: green;
border-top-style: double;
border-right-color : red;
border-bottom-width: 1px;
}
#test2{
border : 10px dotted green;
border-left-style: solid;
border-top : 5px dashed red;
}
#test3{
/*
border-top-style : dashed;
border-right-style : double;
border-bottom-style : solid;
border-left-style : dotted;
*/
border-style : dashed double solid dotted;
}
#test4{
border-width : 10px;
border-style : groove; /* 안으로 들어간 액자 느낌 */
border-top-left-radius : 50px;
}
#test5{
border-width : 10px;
border-style : ridge; /* 튀어나온 액자 느낌 */
border-bottom-right-radius : 80px;
}
#test6{
border-width: 10px;
border-style : inset; /* 면적 자체가 안으로 움푹 패인 느낌 */
border-top-left-radius : 60px;
border-bottom-right-radius : 60px;
background-color: yellow;
}
#test7{
border-width : 10px;
border-style : outset; /* 면적 자체가 밖으로 튀어나온 느낌 */
}
#test8{
border-style : solid;
border-radius : 50px;
}
#test9{
box-shadow : 5px 5px 10px 5px gray;
}
#test10{
border : 2px dashed pink;
}
#btn{
border : 2px dashed pink;
padding : 10px 20px;
border-radius : 10px
}
#btn:hover{
background-color: gray;
cursor: pointer;
}
</style>
Reference
この問題について(08外枠に関するタグ), 我々は、より多くの情報をここで見つけました https://velog.io/@kojam9041/08테두리-관련-태그テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol