代码之家 › 专栏 › 技术社区 › NTahaE

CSS边框边缘(一侧半径,另一侧边缘)

html-email css html

-2

NTahaE · 技术社区 · 9 年前

CSS代码:

/*////// FRAMEWORK STYLES //////*/

.flexibleContainerCell {
  padding: 10px;
}

.flexibleImage {
  height: auto;
}

.bottomShim {
  padding-bottom: 20px;
}

.imageContent,
.imageContentLast {
  padding-bottom: 20px;
}

.nestedContainerCell {
  padding-top: 20px;
  padding-Right: 20px;
  padding-Left: 20px;
}


/*////// GENERAL STYLES //////*/

body,
#bodyTable {
  background-color: #F5F5F5;
}

#bodyCell {
  padding-top: 40px;
  padding-bottom: 40px;
}

#emailBody {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-collapse: separate;
  border-radius: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #202020;
  font-family: PT Sans;
  font-size: 20px;
  line-height: 125%;
  text-align: Left;
}

p {
  color: #202020;
  font-family: Verdana;
  font-size: 12px;
  line-height: 130%;
  text-align: Left;
}

.textContent,
.textContentLast {
  color: #404040;
  font-family: Helvetica;
  font-size: 16px;
  line-height: 125%;
  text-align: Left;
  padding-bottom: 20px;
}

.textContent a,
.textContentLast a {
  color: #2C9AB7;
  text-decoration: underline;
}

.nestedContainer {
  background-color: #E5E5E5;
  border: 1px solid #CCCCCC;
}

.emailButton {
  background-color: #2C9AB7;
  border-collapse: separate;
  border-radius: 4px;
}

.buttonContent {
  color: #FFFFFF;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
  line-height: 100%;
  padding: 15px;
  text-align: center;
}

.buttonContent a {
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

.emailCalendar {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
}

.emailCalendarMonth {
  background-color: #2C9AB7;
  color: #FFFFFF;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.emailCalendarDay {
  color: #2C9AB7;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 60px;
  font-weight: bold;
  line-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

图像中红色部分的帮助将非常棒。泰。

1 回复 | 直到 6 年前

Pixelomo 9 年前

创建所需的形状不仅需要边界半径,还可以将div的特定角点作为目标,使曲线具有以下语法:

border-radius: 45px 0 0 0;

或

border-radius: 0 45px 0 45px;

等每个数字定义一个不同的角。

要添加倾斜角,需要在div/td中添加一个:after元素,如下所示:

 div:after{
     content: "";
     position: absolute;
     border-left: 45px solid transparent;
     border-bottom: 45px solid transparent;
     border-right: 45px solid red;    
}

推荐文章