css 缝合边框

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 缝合边框相关的知识，希望对你有一定的参考价值。


.stitched {
   padding: 20px;
   margin: 10px;
   background: #67bbab;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #67bbab, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #68868e;
   font-weight: normal;
}



/* This One -Below- Looks Better on the JCF site */


.stitched {
   padding: 20px 10px;
   margin: 10px;
   background: #67bbab;
   color: #ffffff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #ffffff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #67bbab, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px rgba(104, 134, 142, 0.57);
   font-weight: normal;
}

以上是关于css 缝合边框的主要内容，如果未能解决你的问题，请参考以下文章

css CSS：缝合效果

css 缝合 - Efecto de parche cosido