画像を使用せずに CSS のみを使用して、このようなデザイン (縁取り) を行うことは可能ですか?
私たちのデザイナーの 1 人が私にそれを解雇しました。それはフォトショップの境界線かもしれないと思いますが、可能であれば画像の使用は避けたいと思っています。
ヒントをお寄せいただきありがとうございます。
画像を使用せずに CSS のみを使用して、このようなデザイン (縁取り) を行うことは可能ですか?
私たちのデザイナーの 1 人が私にそれを解雇しました。それはフォトショップの境界線かもしれないと思いますが、可能であれば画像の使用は避けたいと思っています。
ヒントをお寄せいただきありがとうございます。
はい、できます!素晴らしいcss3パターンで
これは大まかなデモです。
HTML:
<div class='pat-ho' ></div>
<div class='pat-ve' ></div>
<div class='text' >Text Text Text</div>
CSS:
.pat-ho {
position: absolute;
width:500px; height:500px;
background-color: gray;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 20px 20px;
}
.pat-ve {
position: absolute;
width:450px; height:500px;
background-color: gray;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 20px 20px;
left: 25px
}
.text {
position: absolute;
width: 470px;
height: 470px;
background: white;
top: 25px; left: 25px;
}
フレームのみの画像では、次のコードで遊ぶことができます: DEMO
#frame
{
border: 20px;
border-image: url("http://ohhs.ohsd.net/~brick/sci/images/20_20.gif") 27 round stretch;
border-image-width: 15px;
background-color:lightgray;
}