1

基本的に放射状のグラデーションであるテキストで要素を作成しようとしています。丸い白いコンテナを取り、白いボックスの影を追加することでこれを行うことができると思いましたが、影の先頭の色とdivの背景色がクロムで一致せず、border-radiusプロパティはFirefoxで奇妙な境界線を引き起こします。

私はいくつかの入力が大好きです、私はこれのためのコードペンを作成しました、しかしここにコードがあります...

http://codepen.io/syren/pen/tcdBz

div.feature{
  background:#000;
  width:100%;
  height: 300px;
}

div.text{
  width: 300px;
  height: 300px;
  background: white;
  padding: 130px 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 160px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 50px 50px #fff;
  margin: 0 auto;
}

ありがとう！

4

1 に答える 1

1

修正/回避策は次のとおりです。

div.text{
  width: 300px;
  height: 170px;
  background: white;
  padding: 130px 0 0;

  border:solid 1px white;
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px 30px #fff,0 0 50px 40px #fff;
  margin: 0 auto;
}

バギーボーダーは背景色なので、box-shadowカバーするようになりました

更新されたペン

于 2013-02-22T00:49:39.500 に答える