liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - outline(光る効果)

outlineは、目標に光る効果を追加する。
※outlineは物理領域は占めない。

属性:

  • outline
  • outline-color
  • outline-style
  • outline-width
  • outline-offset
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>outline(光る効果)</title>
   <style type="text/css">
        body {
            font-size: 24pt;
        }
        div {
            font-size: 12pt;
            width: 400px;
            height: 60px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
outline: rgba(50,50,50,0.5) solid 10px
<div style="outline: rgba(50,50,50,0.5) solid 10px;">
10px,solid</div>
outline: rgba(50,50,50,0.5) groove 16px
<div style="outline: rgba(50,50,50,0.5) groove 16px;">
16px,goove</div>
outline: rgba(50,50,50,0.5) ridge 16px
<div style="outline: rgba(50,50,50,0.5) ridge 16px;">
10px,ridge</div>
outline: rgba(50,50,50,0.5) ridge 10px;outline-offset:10px;
<div style="outline: rgba(50,50,50,0.5) ridge 10px;
  outline-offset:10px;">
10px,offset 10px</div>
</body>
</html>

f:id:liguofeng29:20160202232936p:plain