Rumah > hujung hadapan web > html tutorial > 对话框css3实现方式_html/css_WEB-ITnose

对话框css3实现方式_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 08:49:07
asal
970 orang telah melayarinya

<style type="text/css"> #box { margin-left:80px; margin-top:20px; padding-left:20px; height: 60px;  background: #2aa1c8; position: relative;  border-radius:10px; border:1px solid #1c82a3;}#box:before{   content:"";   position: absolute;   right: 100%;   top: 16px;   width: 0;   height: 0;   border-top: 12px solid transparent;   border-right: 12px solid #1c82a3;   border-bottom: 12px solid transparent;}#box:after {   content:"";   position: absolute;   right: 100%;   top: 18px;   width: 0;   height: 0;   border-top: 10px solid transparent;   border-right: 10px solid #2aa1c8;   border-bottom: 10px solid transparent;}  </style>  <body class="">    <div style="width:60px;height:60px;background:#ccc;float:left;"></div> <div id="box">对话框</div></body>//before伪类作为三角的边框//此对话框是自适应屏幕大小的
Salin selepas log masuk

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan