CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して境界線を作成およびスタイル設定する方法は？

要素の境界線を定義し、CSSを使用してスタイルを設定できます。 CSS borderプロパティは、要素のborderプロパティを定義するために使用されます。これは、border-width、border-style、border-colorの省略形です。さらに、画像を境界線として指定できます。

構文

CSSボーダープロパティの構文は次のとおりです-

Selector {
   border: /*value*/
}

例

次の例は、CSSボーダープロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 70px solid transparent;
   margin: 15px;
   padding: 3px;
   border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
   background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用して境界線を作成およびスタイル設定する方法は？

例

<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
   margin: auto;
   width: 60%;
   border: 4px solid sienna;
   padding: 10px;
   background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
   border-radius: 55px 100px 2px 95px;
}
#d2 {
   border: 1.5px solid rosybrown;
   padding: 10px;
   border-radius: 205px 500px;
}
img {
   border-radius: 3% 50%;
   display: block;
   margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用して境界線を作成およびスタイル設定する方法は？


  1. CSSクリップパスを使用して三角形を作成する方法

    CSSのclip-pathプロパティを使用して三角形を作成できます。 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector {    clip-path: /*value*/ } 例 次の例は、CSSのclip-pathプロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>          div {    

  2. CSSを使用して白黒画像を作成する方法

    CSSのfilterプロパティにグレースケール値を指定することで、白黒画像を作成できます。フィルタプロパティを使用して、画像にぼかしやドロップシャドウなどの特殊効果を適用できます。 構文 CSSフィルタープロパティの構文は次のとおりです- Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); } 例 次の例は、CSSフィルタープロパティを示しています。 <!DOCTYPE html> <html>    <