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>