- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
Border-Radius Support in Email.
Just a follow up from a Twitter conversation.
Here is a quick button I threw together using Border-radius:
<table border="0" cellpadding="10" cellspacing="0" width="150">
<tr>
<td align="center" style="background: #2fbf6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 2px solid #03883e !important;" valign="top">
<a href="##" style="color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif;">Order now</a>
</td>
</tr>
</table>
And here's how it degrades across email clients.
Note: Some of the colours/sizes are off as they were screenshots taken from different testing areas/platforms.
Note2: As RedFerret pointed out - if you remove !important from the code above the border will display on Outlook 2007/2010/2013.
출처: https://www.campaignmonitor.com/forums/topic/7666/borderradius-support-in-email/
댓글 0
댓글 쓰기 권한이 없습니다.
8 | 디자이너를 위한 오픈소스 프로젝트 6선 | 2017.04.27 |
> | 이메일별 border-radius 처리 방법 | 2017.03.14 |
6 | CSS를 최적화하고 파일크기를 줄이는 15가지 방법 | 2017.03.14 |
5 | sss | 2015.09.16 |
4 | html 특수문자 | 2015.08.18 |
3 | accesskey | 2014.11.14 |
2 | Cufon 사용방법 | 2014.07.01 |
1 | 익스플로러에 드림위버를 기본 편집기로 만들기 | 2009.09.09 |