html - CSSを使用して透明な境界線を作成する方法は?

Question

ブログを持っているクライアントのために、このようなことをしようとしています。

彼女は半透明の境界線を望んでいました。背景だけにすることでそれが可能であることを私は知っています。しかし、バナー用のこの種の css テクニックの背後にあるロジック/コードを見つけることができないようです。誰もこれを行う方法を知っていますか? それは私のクライアントが彼のブログで達成したい外観であるため、それは多くの助けになるでしょう....

Answer 1

追加の (疑似) 要素を使用せずにborder-style: doublewith を使用することもできます。background-clip: padding-boxこれはおそらく最もコンパクトなソリューションですが、他のソリューションほど柔軟ではありません。

例:

<div class="circle">Some text goes here...</div>

.circle{
    width: 100px;
    height: 100px;
    padding: 50px;
    border-radius: 200px;
    border: double 15px rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.7);
    background-clip: padding-box;
}

よく見ると、境界線と背景の間のエッジが完全ではないことがわかります。これは現在のブラウザの問題のようです。しかし、境界が小さい場合はそれほど目立ちません。